css权重试题 |手机css 背景图片

CSS权重是用来决定样式优先级的，当有多个样式同时作用于同一个元素时，浏览器就需要根据CSS权重来决定应该采用哪个样式。

CSS权重是由不同的选择器组成的，一般来说，选择器越具体，权重就越高。在同等选择器的情况下，后面的样式会覆盖前面的样式。

那么，不同类型的选择器有哪些权重呢？

1. !important声明： 10000
2. 行内样式： 1000
3. ID选择器： 100
4. 类、伪类和属性选择器： 10
5. 元素选择器和伪元素选择器： 1

这意味着，如果一个样式有!important声明，那么它的权重就是10000，无论其它样式的权重如何，它都会被最终采用。

如果一个元素同时拥有行内样式和外部样式表中的样式，那么行内样式的权重为1000，而外部样式表中的样式的权重则取决于选择器的类型。

举个例子：

#nav li.active a {
color: red;
}
.nav-item a {
color: blue;
}

如果大家的HTML代码是这样的：

<ul id="nav">
<li class="active nav-item"><a href="#">Link</a></li>
</ul>

那么这个链接的颜色会是红色，因为 #nav li.active a 的权重为 100 + 10 + 1 = 111，而 .nav-item a 的权重为 10 + 1 = 11。

总之，了解CSS权重对于排除样式冲突和写出更好的CSS代码都非常有帮助。