优先级

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入探讨CSS中各类选择器的优先级规则，包括ID选择器、类选择器、元素选择器等，并通过实例说明复合选择器的权重叠加原理。了解这些规则对于精确控制网页样式至关重要。

优先级注意的问题

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类元素选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=“”	1，0，0，0
！important	无穷大

注意点

权重是有四位数字组成，但不会有进位
可以理解为类选择器永远大于元素选择器，id永远大于类
等级判断从左到右，如果有一位相同，判断下一位
继承的权重为0，如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0
如果这个标签被直接选中，则不管父元素

复合选择器会有权重叠加的问题

<style>
    ul li {//0,0,0,1+0,0,0,1=0,0,0,2
       color:green;
       }
    li {
       color:red;
       }
    .nav li {//0,0,1,0+0,0,0,1=,0,0,1,1
       color:yellow;
       }
      
 </style>
<body>

    <ul class="nav">
        <li></li>//黄色
    </ul>
</body>