CSS优先级

最新推荐文章于 2023-09-20 11:08:31 发布

jing_wuya

最新推荐文章于 2023-09-20 11:08:31 发布

阅读量649

点赞数 1

分类专栏： HTML+CSS 文章标签： css html

本文链接：https://blog.csdn.net/jing_wuya/article/details/78022355

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.CSS优先级

项目中，一开始写的CSS还挺好的，后面慢慢就乱了，之后遇到问题直接祭上了大杀器！important，别笑，原因就是CSS优先级掌握的不扎实。来一波总结。

定义：浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。

上公式：内联(直接嵌在HTML文档中) > ID选择器(id) > 伪类(:hover)=属性选择器([src])=类选择器(class) > 元素选择器(p) > 通用选择器(*) > 继承的样式(inherent)

上面的顺序记住了，主要是伪类=属性=类（笔试考过的，还写错了）

关于样式的优先级，也有以下公式：

一般情况：外部样式（通过link引入的） < 内部样式（写在style标签里的样式） < 内联样式（嵌在HTML元素里的）

为什么会有一般情况？因为一般情况，内部样式是在外部样式后面的，head头部里先通过link引入外部样式，再在style标签里写内部样式，这样肯定是内部样式大于外部样式。若果上述顺序反了，先在style标签里写内部样式，再通过link引入外部样式，那么外部样式就会去覆盖内部样式，当然很少有人这么干了。所有加上了一般情况。主要的原因还是看先后的顺序。废话好多…

2.CSS优先级计算

四个字：计算权重

CSS权重

1.内联权重最高：1000
2.ID选择器：100
3.类选择器（包括属性选择器和伪类）：10
4.元素选择器：1
还有通用选择器，忽略掉了…

来个例子看看：

    <style>
        #div1 p {
            /* 100 + 1 = 101 */
            color: red;
        }
        #div1 .p1 em {
            /* 100 + 10 + 1 = 111*/
            color: blue;
        }
        #div1 p span em {
            /* 100 + 1 + 1 + 1 = 103 */
            color: yellow;
        }
    </style>
    <div id="div1">
        <p class="p1">
            <span>
                <em>
                    计算我是什么颜色？
                </em>
            </span>
        </p>
    </div>

这里写图片描述
颜色当然是权重计算出来最大的一个，蓝色了。
来总结几条规则了：

每个选择器都有一个权重，也叫权值，越大越优先，请看上面的例子；
取值相等时，后出现的样式要优先，后来的厉害呗；
创作者的规则高于浏览器：网页编写者设置的CSS样式高于浏览器，如果不是这样的话，那要CSS干嘛，肯定人的权限要大于机器嘛；
继承的CSS样式不如指定的CSS样式，这也是废话，指定了样式肯定要生效的，继承只是在没有指定时发挥作用；
在同一组属性设置中标有‘！important’优先级最大，这个很厉害，但是不要去用，后面解释，太厉害的东西都是这样，越厉害越危险。看个例子：

        p.myP {
            color: red !important;
            color: blue;
        }
        <p class="myP">important虽好可不要乱用哦！</p>

这里写图片描述

如果没有！important，就按照后来的老大，应该是蓝色，但是有了这个大杀器，忽略所有规则，一步登天，给我的感觉是这玩意像是开发人员偷懒，不愿意去调试一层层的CSS样式，图省事直接搞了个important，有时候在项目中怎么改CSS也不生效，马上就会想到它，但是越厉害的东西越危险。因为用了第一次，就会再用第二次，导致越用越多。

所以不建议使用!important。因为它不在优先级顺序里，它跟之前的优先级、权重都没有关系，因此遇到问题首先考虑的是按照样式的规则和优先级来改动，不要盲目的用!important，那玩意治标不治本。

再来谈谈这个搅局的属性，按照之前的说法，岂不是不能用了，至少有一些地方只能使用它了，比如用它来覆盖内联样式，毫无疑问，内联样式的优先级最高了，干掉他只能祭出这个无敌的大杀器，这个就不举例子了，总之CSS优先级要从规则上来。