CSS 特异性看这篇就行了

Posted 浪漫主义码农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 特异性看这篇就行了相关的知识,希望对你有一定的参考价值。

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>

效果:

写在最后

如果有误,欢迎大佬们评论指出。

💌 慢品人间烟火色,闲观万事岁月长 💌

一个心怀浪漫宇宙,也珍惜人间日常的码农

以上是关于CSS 特异性看这篇就行了的主要内容,如果未能解决你的问题,请参考以下文章

CSS 特异性看这篇就行了

如何为长辈设置 iPhone/iPad?看这篇就行了 | 有用功

嵌套 CSS 选择器而不增加特异性

关于消息队列的优缺点,看这篇就行

前端面经 - 看这篇就够了(笔者靠这个拿到阿里和字节的offer)

C站学习导航,想用CSDN学习看我这篇就行了!