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; }

页面效果：