CSS 特异性看这篇就行了

最新推荐文章于 2024-04-29 13:38:05 发布

浪漫主义码农

最新推荐文章于 2024-04-29 13:38:05 发布

阅读量1k

点赞数 2

分类专栏： CSS 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Mq_sir/article/details/121409667

版权

CSS 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

CSS 特异性

背景：在我每次画界面的时候，总会出现样式冲突、样式污染、一级很多样式改不掉的问题。所以总结一文来彻底搞懂css样式的特异性，方便你我他。

什么是css特异性？

如果有多个属性或者选择器，同时指向同一元素的CSS冲突，那么优先使用什么样式规则。那么便有了特异性的概念。

特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

简单来说：CSS特异性就是CSS样式选择器的权重计算。从而让哪些样式应用到元素上。

特异性层次

每一种选择器都有自己的权重，依次是
行内样式 > ID选择器 > 类、属性、伪类 > 元素、伪元素选择器
我们来个例子说明一下：
代码：

<body>
    <div id="id1" class="class1" style="background: blue;">说明行内样式最强</div>
    <div id="id2" class="class2">id排第二</div>
    <div class="class3">类、属性、伪类</div>
    <div>元素选择器最后</div>
</body>

<style>
    /* 元素选择器 */
    div{
        width: 100px;
        height: 100px;
        background-color: rgba(93, 171, 195, 0.931);
        display: inline-block;
    }
    /* id选择器 */
    #id1,#id2{
        background-color: red;
    }
    /* 类选择器 */
    .class1,.class2,.class3{
        background: orange;
    }
</style>

效果:

在这里插入图片描述

可以说明上面的选择器权重是不同的。

权重计算特异质

这么多选择器，那是不是我写一个行内样式其他样式就全部没用了呢？NONONO，这个时候我们就要来计算权重了。

我们以一个 0 0 0 0 四位数为样式的权重总和

从最低的元素、伪元素选择器 在个位+1 就是 0 0 0 1

类、属性、伪类 在十位数+1 就是 0 0 1 0

ID选择器 在百位数+1 就是 0 1 0 0

行内样式 在千位数+1 就是 1 0 0 0

比较每一个权重值的总和，大的样式优先。

例子：

<body>
    <div id="main">
        <div class="content">
            <p class="name">浪漫主义码农</p>
            <p class="hobby">爱好打篮球</p>
            <p class="eat">是个吃货</p></p>
        </div>
    </div>
</body>
<style>
    /* 权重 0 0 0 1 */
    p{
        color: red;
    }
    /* 权重 0 0 1 0 */
    .name{
        color: blue;
    }
    /* 权重 0 0 2 1 */
    .content p:nth-child(1){
        color: chartreuse;
    }
</style>

效果：

在这里插入图片描述

计算就是这样计算的。但是如果有相同权重的，就按照定义的顺序优先的样式

补充

除了上述的选择器外，通用选择器* 权重为0 0 0 0 为最低

!important 表示 非必要不使用，是比行内样式更为重要，是权重最高的，无视其他。

例子：当我给最低的权重加一个!important

<body>
    <div id="main">
        <div class="content">
            <p class="name" style="color: chartreuse;">浪漫主义码农</p>
            <p class="hobby" style="color: chartreuse;">爱好打篮球</p>
            <p class="eat" style="color: chartreuse;">是个吃货</p></p>
        </div>
    </div>
</body>
<style>
    /* 权重 0 0 0 2 */
    p:nth-child(1){
        color: red !important;
    }
    /* 权重 0 0 1 0 */
    .name{
        color: blue;
    }
</style>