一、初識層級選擇器
層級選擇器是CSS選擇器中的一種，它可以幫助我們通過多個元素之間的關係，選擇所需要的元素。好比我們在HTML中的標籤嵌套，一個標籤可以嵌套另一個標籤，層級選擇器就是利用這種父子、祖先後代等關係去選擇元素的。
在CSS中，層級選擇器的表示方法是將子選擇器寫在父選擇器的後面，用空格隔開，例如：
div p {
color: red;
}
以上代碼就是選擇所有p標籤，但要是它們是div標籤的子元素。我們可以發現通過這種方式我們可以構建非常具有針對性的選擇器。
二、子選擇器和後代選擇器
既然層級選擇器是通過父子元素之間的關係來選取元素的，那它們之間的關係究竟是如何定義的。在CSS選擇器中，我們常常可以用「>」符號表示子選擇器，「空格」表示後代選擇器。
子選擇器選擇的是所有直接屬於父元素的子元素，而後代選擇器選擇的是父元素下的所有後代元素，不論直接與否。咱們看看下面的實例：
- 蘋果
- 梨子
- 鴨梨
- 香梨
- 菠蘿
原創文章，作者：GOCBV，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/369407.html
微信掃一掃 
支付寶掃一掃 