CSS 关于 选择器的优先级（重点）

CSS 关于 选择器的优先级（重点）

---

一、权重规则💊

如果 通过 不同的选择器，找到了同一个元素，并且各选择器设置了不同的样式，那么浏览器应该听谁的呢？
那就需要根据 各选择器的权重 来说的算

权重越高，优先级越高

小生不才，这里我随便画了张图，选择器权重规则如下：

---

二、标签选择器

标签选择器的权重值为 1

简单演示
HTML

<span>选择器的优先级</span>

CSS

span{
    color: orange;
}

权重相同

Q: 如果指定了两个同样的 标签选择器 ，也就是权重值相同的情况下，那个优先级更高？

HTML代码会从上往下执行，在权值相同的情况下，后面的选择器 会覆盖 前面相同选择器 所设置的样式

span{
    color: orange;
}
span{
    color: teal;
}

适用于 下方内容 所有权重相同的选择器

三、类选择器

类选择器的权重值为 10

HTML

<span class="active">选择器的优先级</span>

CSS

span{				/* 标签选择器 */
    color: orange;
}
.active{			/* 类选择器 */
    color: tomato;
}

10(类选择器) > 1(标签选择器) , 理所当然的 类选择器 优先级更高

---

四、ID选择器

ID选择器的权重值为 100

HTML

<span id="span1" class="active">选择器的优先级</span>

CSS

span{				/* 标签选择器 */
    color: orange;
}
.active{			/* 类选择器 */
    color: tomato;
}
#span1{				/* ID选择器 */
    color: purple;
}

100(ID选择器) > 10(类选择器) > 1(标签选择器) ，这里 ID选择器 优先级更高

---

五、内联样式

ID选择器的权重值为 1000

HTML

<span id="span1" class="active" style="color: skyblue">选择器的优先级</span>

CSS

span{				/* 标签选择器 */
    color: orange;
}
.active{			/* 类选择器 */
    color: tomato;
}
#span1{				/* ID选择器 */
    color: purple;
}

使用内联样式，比 上面三种选择器的优先级 都高

1000(内联样式) > 100(ID选择器) > 10(类选择器) > 1(标签选择器)

---

六、!important 方法

!import 方式相当于强制让样式生效，其权重值为 无人可敌 的10000，优先级最高，但是不推荐使用这种方式，容易造成结构混乱，大量使用 !import 的代码难以维护

HTML

<span id="span1" class="active" style="color: skyblue">选择器的优先级</span>

CSS

span{				/* 标签选择器 */
    color: orange !important;
}
.active{			/* 类选择器 */
    color: tomato;
}
#span1{				/* ID选择器 */
    color: purple;
}

---

七、计算权重📐

计算权重值，无非就是数数，数选择器的数量，然后与权重值 一 一对应加起来
权重越高，优先级越高

讲了那么多，那如果是复杂点的选择器，又怎么去判断权重值呢？

HTML

<div id="div1" class="top">
    <div id="div1-1" class="box_1">
        <span id="span1" class="active">选择器的优先级</span>
    </div>
</div>

CSS - 1

.top{
    width: 1226px;
    margin: 20px auto;
}
span{
    font-size: 16px;
    font-weight: bold;
}
div .box_1 span{
    /*
    数数：两个标签选择器，一个类选择器
    权重：1 + 10 + 1 = 012
    */
    color: teal;
}
.top .box_1 span{
    /*
    数数：两个类选择器，一个标签选择器
    权重：10 + 10 + 1 = 021
    */
    color: purple;
}

根据计算后的结果，021 > 012 ，字体颜色为 紫色

CSS - 2

#div1 .box_1 .active{
    /*
    数数：一个ID选择器，两个类选择器
    权重：100 + 100 + 10 = 201
     */
    color: gold;
}
.top #div1-1 span{
    /*
    数数：一个类选择器，一个ID选择器，一个标签选择器
    权重：100 + 10 + 1 = 111
     */
    color: green;
}
#div1 #div1-1 #span1{
    /*
    数数：三个ID选择器
    权重：100 + 100 + 100 = 300
     */
    color: hotpink;
}

根据计算后的结果，300 > 201 > 111 ，字体颜色为 粉色

示例总归是示例，自己动手去尝试、探索，才有所成

---

相关博客💗

• CSS 各种选择器总结