CSS常用選擇器及優先級、一些易混淆選擇器的區別

幾個常用不易混淆的選擇器就簡單介紹一下，就不再贅述了：

• 通配選擇器：*（獲取所有標籤）；
• 類型選擇器：如div、p;
• class選擇器：class，可以允許多個元素使用同一個class名；
• id選擇器：id，每個id名只能允許一個元素使用；
• 羣組選擇器：如div,p（中間用逗號隔開，表示選擇所有div元素和所有p元素）;
• 包含選擇器：如div p（中間用空格隔開，表示選擇div元素內部的所有p元素）。

常用選擇器的優先級：

通配選擇器 < 類型選擇器 < class < id < 行間樣式

---

以下是會用到但又經常混淆的選擇器：

第一組：div>p 和div+p的區別

共用的HTML代碼：

<div class="box1">
    <p class="main">
        我是box1下的p元素（box1的第一層子元素）
    </p>
    <div>
        <p class="main">我是box1的div元素下的p元素(box1的第二層子元素)</p>
    </div>
    <p class="main">我是緊接在box1下的p元素（box1的第一層子元素）</p>
</div>
<p class="main">我是緊接在box1後的p元素（box1的第一層子元素）</p>
<p class="main">我是緊接在box1後的p元素（box1的第一層子元素）</p>

div>p： 表示選擇父元素爲div元素的所有p元素。

CSS代碼：

.box1>.main { color: dodgerblue; }

頁面效果：

div+p：表示選擇緊接在div元素之後的所有p元素。

CSS代碼：

.box1+.main { color: dodgerblue; }

頁面效果：

---

第二組：nth-child和nth-of-type的區別

共用的HTML代碼：

<section>
    <div>我是一個普通的div標籤</div>
    <p>我是第1個p標籤</p>
    <p>我是第2個p標籤</p>  <!-- 希望這個變紅 -->
</section>

p:nth-child(2)：選擇屬於其父元素的第二個子元素的每個 p元素。

CSS代碼：

p:nth-child(2) { color: lightpink; }

頁面效果：

p:nth-of-type(2)：選擇屬於其父元素第二個 p 元素的每個 p 元素。

CSS代碼：

p:nth-of-type(2) { color: lightpink; }

頁面效果：