元素選擇器與CSS樣式的選取

CSS的樣式選擇器，就是指通過CSS來查找、選出頁面中的元素，並使它們應用相應的樣式效果。而元素選擇器，就是CSS中最簡單的一種選擇器。

元素選擇器採用的是元素的名稱作為選擇器，比如p、h1、div等等。可以通過用標籤名字來選取網頁文檔中的相應標籤元素，實現樣式的選擇。

p {
    color: red;
    background-color: white;
}

兄弟元素選擇器，是指通過CSS的選擇器，選取某個元素的同級兄弟元素，並使它們應用相應的樣式效果。

例如，下面的代碼可以選中緊接著在p元素後面的所有div元素，並改變它們的樣式。

p ~ div {
    color: blue;
    border: 1px solid black;
}

CSS中，元素選擇器按照標籤名依次進行選擇，常用到的元素選擇器有：

偽元素選擇器，是指相當於網頁中的不存在的元素，通過CSS進行選取。常見的偽元素選擇器有：

如果想要選擇一個元素中間的內容，可以使用:first-child和:last-child選擇器。

  p:first-child {
     font-weight: bold;
  }

  p:last-child {
     font-style: italic;
  }

元素選擇器常用的例子，包括：

元素選擇器又稱為類型選擇器，因為它是通過標籤名來選擇元素的。

例如，下面的代碼中，通過p元素選擇器來選取所有的段落元素，並使它們的文字顏色變為紅色。

p {
    color: red;
}

元素選擇器不關心元素的屬性、ID或類名，只關心標籤名字。因此，使用元素選擇器來選取元素時，不需要將元素的屬性和標籤名寫在一起。

/* 不推薦的寫法 */
p.classname {
  color: blue;
}

/* 推薦的寫法 */
p {
  color: blue;
}

CSS父元素選擇器是指選擇器中包含的元素A，並且元素A包含了元素B，這時可以使用父元素選擇器來選取元素B。

例如，下面的代碼用來選擇所有的li元素的下一個a元素，並將其文字顏色變為紅色。

li > a {
  color: red;
}

在CSS中，元素選擇器的使用非常便利，只需要編寫相應的規則，就可以直接應用到HTML頁面的標籤中。例如：

/* 將所有的段落文字顏色設為藍色 */
p {
    color: blue;
}

/* 將所有的h1元素大小改為2em */
h1 {
  font-size: 2em;
}

CSS是區分大小寫的，因此在使用元素選擇器時，標籤名必須寫在正確的大小寫形式中。例如，p只能選擇p元素，而P只能選擇P元素。

通過本文的介紹，相信大家已經對元素選擇器的基本知識具備一定的了解，並可以成功運用到自己的網頁設計中。如果還有任何疑問，歡迎來信詢問。

原創文章，作者：ZJWC，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/135773.html