CSS选择器分类和权重

最新推荐文章于 2024-08-09 11:34:51 发布

背太阳的牧羊人

最新推荐文章于 2024-08-09 11:34:51 发布

阅读量326

点赞数

分类专栏： CSS 文章标签： css选择器分类 css选择器权重 css渲染方式

本文链接：https://blog.csdn.net/u013565133/article/details/103310593

版权

CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

CSS全称“Cascading Style Sheet”，叫做层叠样式表。CSS样式就像透明的层一样一层一层叠加起来来修饰一个元素。

分类和权重

权重: 计算一个不进位的数字

ID选择器 #id{} +100
类属性伪类 +10
元素伪元素 +1
其它选择器 +0

比如：
在这里插入图片描述
上面右边选择器的优先级比左边高，样式叠加的时候右边选择器的样式会覆盖左边选择器的样式。

其它权重：

!important优先级最高。当一个css属性加上!important后，那这个属性的值就是最重要的，不管谁都没有办法覆盖它，不管前面用的什么选择器，不管出现在哪里，只要有!important那它的优先级就是最高的。
内联样式优先级更高。相比写在style标签和外部链接的样式，
相同权重，后写的生效。

解析方式和性能

浏览器的解析方式是从右往左解析的，比如下面元素a的样式.body div .hello{ ... }，浏览器先找到 .hello，然后接着验证.hello有没有祖先是div，然后再验证div的祖先有没有是.body的。这样找元素匹配的样式会更快，浏览器这样解析性能会更高。

html代码：

<body class="body" id="body">
    Hello CSS!
    <div>
        <a href="#" class="hello">aaa</a>
    </div>
</body>

css代码：

    <style>
        body{
            padding: 10px;
            font-size: 14px;
            background:red; 
        }
        body.body{
            font-size: 20px;
            background: red;
        }
        #body{
            background: blue;
        }
        .body div .hello{
            color: pink;
        }
    </style>