css属性选择器 权重

在CSS的属性选择器中，不同的选择器有着不同的权重。这是我们在编写CSS时需要注意的问题之一。

下面是CSS中常见的属性选择器及其对应的权重：

选择器                 权重#id                    100.class                 10tag                    1[attribute]            1:link/:visited         1	:active	:hover	:focus	:target:last-child           1:nth-child            1

其中，#id选择器的权重最高，是其他选择器的10倍。这也是为什么我们经常使用id选择器来对某个元素进行样式设置，因为它的优先级很高。

而.class选择器的权重比tag选择器高，但又比#id选择器低，所以我们也可以使用class选择器来对某些元素进行样式设置，比如导航菜单。

而属性选择器、伪类选择器和伪元素选择器的权重都为1，它们的优先级相对较低，应该在样式设置中多使用类选择器和id选择器。

还需要注意的一点是，选择器的权重是可以叠加的。当一个元素同时拥有多个选择器时，它们的权重会相加。

下面是一个示例：

#header.navbar {
        background-color: #333;
        color: #fff;
}
    

这里我们同时使用了#id选择器和.class选择器，它们的权重相加为110，所以这个规则会优先于只有.class选择器或只有#id选择器的规则。

在编写CSS样式时，我们需要根据选择器的权重确定样式的优先级。如果不确定某个规则的优先级，可以使用特殊的权重比较工具来计算它们的优先级。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！