“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”

选择器类别

id选择器

<div id="box"></div>

#box {}

类选择器

<div class="box"></div>

.box {}

属性选择器

<a href="url"></a>

// 选择含油href属性的标签
[href] {}

// 选择含有href属性且href的属性值为"url"的标签
[href="url"] {}

developer.mozilla.org/zh-CN/docs/…

伪类选择器

<div class="box">
    <p>p1</p>
    <div>div1</div>
    <p>p2</p>
    <p>p3</p>
    <div>div2</div>
</div>


.box:hover {}
.box :first-child{}
.box :nth-type-of(2n){}
.box :nth-child(2n+1) {}

区分nth-type-of和nth-child

.box p:nth-type-of(2)

指的是 .box1下，按p元素开始计数，第二个p元素就是所要选择的元素

.box p:nth-child(2)

指的是 .box1下，按元素开始计数，第二个元素就是所要选择的元素。若第二个元素不是p元素，则匹配不上，样式不生效。

代码：

表现：

有个盲猜的结论：对于nth-of-type是按元素类型进行选择的，首先会匹配冒号:前的元素类型，若冒号：前的选择器所选择的是包含多个元素类型的，则将其包含的元素类型进行划分不同的元素类型，各自进行计数匹配。

对于nth-child是按元素的位置进行选择，即与元素是第几个有关，先选出符合位置的元素，再匹配冒号前的选择器，若匹配成功，样式生效，否则不生效。

元素选择器

<div></div>

div {}

伪元素选择器

<div class="box"></div>

.box:after{}
.box:before{}

后代选择器

<div class="box">
   <div>
       <div></div>
   </div>
</div>

// 选择.box选择器下的所有div选择器，即是.box选择器下的两个div都会被选择到
.box div {}

子代选择器

<div class="box">
    <div>
        <div></div>
    </div>
</div>

// 只选择.box选择器的下一级的div选择器
.box > div {}

兄弟选择器

<div id="box"></div>
<div><div>
<div></div>

// 选择#box选择器的同一级的div选择器所选择的元素
#box ~ div {}

【注意】兄弟选择器指的是，选择后面的兄弟元素相邻兄弟选择器

<div id="box"></div>
<div></div>
<div></div>

#box+div {}

【注意】相邻兄弟选择器指的是，选择后面的相邻兄弟元素

选择器权重

选择器类别	权重
!important	1000
id选择器	100
类选择器\属性选择器\伪类选择器	10
元素选择器\伪元素选择器	1
通配符选择器	0

【注意】：

权重的层级是不可超越的，例如说 100个类选择器的权重也比不过1个id选择器的权重
行内样式的权重处于 important和id选择器之间，即是 !important > 行内样式 > id选择器

css选择器