下面是关于CSS选择器权重与优先级的完整攻略：
CSS选择器权重
当多个CSS规则同时作用于同一个元素时，浏览器需要决定应该按照哪个规则来应用样式。为了实现这个目的，CSS定义了选择器的权重，每个规则都按照特定的规则计算出一个特定的权重值。常见的选择器权重如下所示：
- !important = Infinity
- 行内样式(style) = 1000
- ID选择器(#id) = 100
- 类选择器(class),属性选择器,伪类(:hover, :focus, :active) = 10
- 元素选择器和伪元素(::before, ::after) = 1
- 通配符(*),相邻选择器(+,-),子选择器(>),后代选择器( ) = 0
CSS选择器优先级
当多个选择器的权重值相同时，CSS通过选择器的优先级来确定应该按照哪个规则来应用样式。当两个或多个选择器的权重值相同时，按照以下优先级顺序来决定应该应用哪个样式：
- 以!important声明的样式优先级最高；
- 根据权重值大小决定，权重值大的优先级高；
- 同一选择器中，靠近元素的样式声明优先级高；
- 同一规则中，后声明的样式优先级高；
- 通配选择器( * )和 :not()对优先级没有影响。
下面举例说明：
示例一
<!DOCTYPE html>
<html>
<head>
<style>
/* 权重值为10 */
p.red {
color: red;
}
/* 权重值为1 */
p {
color: blue;
}
</style>
</head>
<body>
<p class="red">Hello World</p>
</body>
</html>
上述示例中，选择器p.red和选择器p都能够作用于"Hello World"这个段落，但是p.red具有更高的选择器权重，因此这个段落将会被设置成红色。如果想要让权重相同的两个选择器中的样式生效，需要按照优先级顺序进行设置，例如，把p样式的位置调到p.red的前面：
<style>
/* 权重值为1 */
p {
color: blue;
}
/* 权重值为10 */
p.red {
color: red;
}
</style>
示例二
<!DOCTYPE html>
<html>
<head>
<style>
/* 权重值为10 */
p#myId {
color: red;
}
/* 权重值为1 */
#myId p {
color: blue;
}
</style>
</head>
<body>
<p id="myId">Hello World</p>
</body>
</html>
上述示例中，选择器p#myId具有更高的选择器权重，因此这个段落将会被设置成红色。即使选择器#myId p写在前面，也不会改变颜色的显示。
总之，理解CSS选择器的权重和优先级是CSS中关键的基础之一，在编写样式时需要仔细考虑。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS选择器的权重与优先规则分享 - Python技术站
微信扫一扫 
支付宝扫一扫 