CSS选择器优先级的权值与计算

最新推荐文章于 2025-06-22 09:17:52 发布

请叫我二狗哥

最新推荐文章于 2025-06-22 09:17:52 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS与html 文章标签： CSS 选择器权重选择器优先级权值计算

cnblog博客：https://www.cnblogs.com/f6056/

本文链接：https://blog.youkuaiyun.com/weimob258616/article/details/88951657

CSS与html 专栏收录该内容

27 篇文章

订阅专栏

本文探讨了CSS选择器的优先级和权值计算，详细解释了标签选择器、类选择器、ID选择器以及通配符选择器的权值，并通过实例展示了权值相同时遵循的就近原则。同时指出，尽管通常认为ID选择器权重高于类选择器，高于标签选择器，但实际浏览器计算权重的方式可能更为复杂，不同选择器的权重比并不精确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器权值

标签选择器：权值为1

类选择器和伪类：权值为10

ID选择器：权值为100

通配符选择器：权值为0

行内样式：权值为1000

当权值相同时，遵循就近原则。

实验案例：

<p>派生选择器优先级</p>
 <div id="test1">
 <h1>CSS样式优先级</h1>
 <p id="test2">所谓<b>CSS优先级</b>
,是指CSS样式在浏览器中被解析的先后顺序</p>
 <div>权值相同，就近原则；权值不同，哪个权重高，使用哪个。</div>
</div>

两组权重相同的选择器：

#test1 p b{color:red;}
div #test2 b{color:gray;}

权重计算：

div #test2 b{color:gray;}

1+100+1=102

#test1 p b{color:red;}

100+1+1=102

遵循就近原则，采用div #test2 b{color:gray;}的样式。“CSS优先级”显示为灰色。

倘若选择器为以下方式：

#test1 p b{color:red;}
#test2 b{color:gray;}

权重计算：

#test2 b{color:gray;}

100+1=101

采用#test1 p b{color:red;}的样式。“CSS优先级”显示为红色。

但是这种权重计算的方式并不严谨，浏览器对于各个选择器真实计算权重应该id选择器、class选择器、与标签选择器的真实权重值权重比并非100:10:1

以类选择器和标签选择器为实例写了如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head >
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
     #classblue{color:blue;}
    body div div div div div div div div p b{color:red;}
    </style>
</head>
<body>
<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                                <p>派生选择器优先级</p>
                                <div >
                                  <h1>CSS样式优先级</h1>
                                   <p>所谓<b class="classblue">CSS优先级</b>
                                    ,是指CSS样式在浏览器中被解析的先后顺序</p>
                                    <div>权值相同，就近原则；权值不同，哪个权重高，使用哪个。</div>
                                </div>

                        </div>
                    </div>
                </div>

            </div>

        </div>
        

    </div>
    
</div>
  
</body>
</html>

body div div div div div div div div p b{color:red;}

1+1+1+1+1+1+1+1+1+1+1=11

#classblue{color:blue;}

结果却是#classblue{color:blue;}优先级别更高，显示为蓝色。因此所谓不同选择器权重值的说法并不严谨，只是在一般情况下为了说明id选择器、class选择器和标签选择器之间的权重关系而做的形象数字化的类比。