css权值计算

菜蜗牛很菜

已于 2023-09-07 11:26:55 修改

阅读量184

点赞数

分类专栏：网页设计基础文章标签： css 前端

于 2019-11-07 11:50:30 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45010894/article/details/102952119

版权

网页设计基础专栏收录该内容

23 篇文章

订阅专栏

在 CSS 中，选择器的权值用于确定应用样式规则的优先级。权值是一个用于比较、判断和排序选择器之间优先级的计算值。权值通常由四个部分组成：行内样式、ID 选择器、类选择器和元素选择器。

以下是权值计算的一般规则：

行内样式：权值为 1000，表示具有最高优先级。

<p style="color: red;">这是行内样式文本。</p>

ID 选择器：权值为 100，表示具有较高优先级。

#my-element {
    color: blue;
}

类选择器、属性选择器和伪类选择器：权值为 10，表示具有中等优先级。

.my-class {
    color: green;
}

[type="text"] {
    font-size: 14px;
}

a:hover {
    text-decoration: underline;
}

元素选择器和伪元素选择器：权值为 1，表示具有较低优先级。

p {
    font-weight: bold;
}

::before {
    content: "前置内容";
}

当多个选择器应用于同一个元素时，它们的权值会相加以决定优先级。具体来说，选择器的每个部分都会根据其出现的次数乘以对应的权值，然后将这些乘积相加。

举例来说，如果一个元素有以下样式规则：

css
p#my-element.my-class {
color: orange;
}
其中权值的计算为：100 (ID 选择器) + 10 (类选择器) + 1 (元素选择器)，最终得到优先级为 111 的权值。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

需要注意的是，权值计算仅在多个选择器应用于同一元素时才有意义。当只有一个选择器应用于元素时，不需要进行权值比较，该选择器的样式规则将直接应用。

理解和正确使用选择器的权值可以帮助你掌握 CSS 样式的优先级规则，从而更好地管理和调整样式的应用效果。