一、選擇子元素
在CSS中，通過「>」符號選取元素的子元素。這種選擇器稱為子元素選擇器。 當我們需要修改父元素的某個子元素時，可以使用子元素選擇器來實現。子元素選擇器只會選中第一層子元素，不會進一步選取嵌套在子元素中的元素。下面是一個例子：
.parent > .child {
color: red;
}
這會給所有class為parent的元素的第一層class為child的子元素添加紅色字體顏色。
二、結構偽類
偽類是用於選擇元素某些特殊狀態的選擇器。結構偽類是指根據某個元素在其父元素內位置的不同選擇不同的元素。例如，:first-child偽類用於選取同級元素中的第一個元素。下面是一個例子：
ul li:first-child {
font-weight: bold;
}
上述代碼將給類為ul的元素中的第一個li元素添加粗體字。
三、同層級兄弟選擇器
同層級兄弟選擇器是指根據元素與其同級別的兄弟元素的關係進行選擇。 ~表示選取在該元素之前同級別的所有元素中的最後一個元素。+號表示選取緊隨在該元素後面的同級別的元素。下面是一個例子：
h2 ~ p {
color: blue;
}
上述代碼將給所有h2元素後面的同級別的p元素添加藍色字體顏色。
四、綜合例子
下面是一個綜合運用了子元素選擇器、結構偽類和同層級兄弟選擇器的例子：
ul > li:first-child {
font-weight: bold;
}
ul > li:first-child + li {
font-style: italic;
}
ul > li:first-child ~ li {
color: blue;
}
上述代碼會首先給所有ul元素中的第一個li子元素添加粗體字，緊隨其後的第二個li子元素添加斜體字，其他所有子元素添加藍色字體顏色。
使用CSS子元素選擇器可以有效地優化網頁結構，並使樣式表更加精細且易於維護。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/309529.html
微信掃一掃 
支付寶掃一掃 