[分享]css元素选择器的权重值

在CSS样式表中，存在着多种类型的选择器，而这些选择器之间存在着权重值的差别。在CSS中，选择器的权重值越高，其优先级也就越高，其定义的样式也就会被优先应用。/ 权重值为0,0,0,0 / body ...

在CSS样式表中，存在着多种类型的选择器，而这些选择器之间存在着权重值的差别。在CSS中，选择器的权重值越高，其优先级也就越高，其定义的样式也就会被优先应用。

/* 权重值为0,0,0,0 */
body {}

/* 权重值为0,0,0,1 */
#myid {}

/* 权重值为0,0,1,0 */
div {}

/* 权重值为0,1,0,0 */
.class {}

/* 权重值为1,0,0,0 */
p {}

/* 权重值为0,0,1,1 */
div p {}

/* 权重值为0,1,0,1 */
.class p {}

/* 权重值为1,0,0,1 */
#myid p {}

/* 权重值为0,1,1,0 */
div .class {}

/* 权重值为1,0,1,0 */
#myid div {}

/* 权重值为1,1,0,0 */
p.class {}

/* 权重值为1,0,1,1 */
#myid div p {}

/* 权重值为1,1,1,1 */
#myid p.class .class span {} 

如上所示，权重值由四位数字组成，从左至右依次代表：ID选择器的个数、类选择器和属性选择器的个数、元素选择器和伪元素选择器的个数、通配选择器的个数。在计算权重值的过程中，每一位数字皆为加法，而非乘法或者其他操作。如在样式表中存在一个选择器，其由1个ID选择器、2个类选择器和1个元素选择器组成，则其权重值为0,2,1,0，即权重值为0210。

在CSS样式表的应用过程中，选择器的权重值非常重要，因为它不仅决定着相同属性的定义中哪一条被优先使用，还会影响到继承、覆盖和层叠等CSS特性的表现和应用。因此，在编写样式表的过程中，我们需要合理地运用各种选择器，并且根据实际情况来考虑其选择器的权重值，以达到合适的样式定义和使用效果。