CSS - 选择器优先级介绍

最新推荐文章于 2024-03-17 22:02:47 发布

耳东蜗牛

最新推荐文章于 2024-03-17 22:02:47 发布

阅读量1.5w

点赞数 5

分类专栏： CSS 文章标签： CSS选择器优先级 CSS声明优先级

本文链接：https://blog.csdn.net/It_rod/article/details/80466074

版权

CSS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

特殊性

从CSS选择器文章中我们知道，与多种不同的方法选择元素。所以当我们使用多种规则的时候，我们必须要明确其中的优先级。但是在CSS选择器的规则中，称之为特殊性，特殊性越高，自然优先级越高。

此时我们会先得到一个特殊性说明：

！important 特殊性最高，详情访问重要性
对于内联样式，加1000
对于选中器中给定的ID属性值，加0100
对于选择器中给定的类属性值，属性选择或伪类，加0010
对于选择器中给定的元素选择器和伪元素，加0001.
结合符和通配符选择器对特殊性没有任何贡献，0000

我们还是通过举例说明上面的情况，亲自去测试一下：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            #ID-selector {
                font-size: 10px;
            }

            .class-selector {
                font-size: 12px;
            }

            *[proprty-selector] {
                font-size: 14px;
            }

            *:first-child {
                font-size: 16px;
            }

            div {
                font-size: 18px;
            }

            * div {
                font-size: 20px;
            }

            div::first-line {
                font-size: 22px;
            }

            * {
                font-size: 24px;
            }
        </style>
    </head>  
    <body>  
        <div style="font-size: 6px;" proprty-selector="true" id="ID-selector" class="class-selector">
            测试CSS选择器的特殊性
        </div>
    </body>  
</html>

看这个例子之前先明确两点：

当选择器出于同一种特殊性的时候，位于css文件下部的样式会覆盖上面的样式。
通配符选择器对于特殊性没有任何贡献，所以下面我用了许多的通配符（强烈说明日常开发最好不要使用过多通配符，这里只是为了举例子）来代替div属性，是因为要将div自身的特殊性影响排除。

可以看到我们的css文件代码书写的顺序是按照我最上面图的顺序去加的样式，所以现在我们对照上图中红色框的样式来对比，如果是处于同一层级，那么下面的css样式会覆盖上面的css样式。

现在我们的到的特殊性的顺序是：

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

说明：伪元素选择器的顺序说明请看(3)

（1）对于顺序中有两部分存在等于号的，因为红色框中匹配样式的顺序与我写的代码的顺序相反，所以他们之间是平级的，所以导致代码后面的css样式覆盖了代码前面的样式（因为css的解析是从上面往下的）。

（2）我们再来说一下一开始谈到的特殊性说明中的：结合符和通配符选择器对特殊性没有任何贡献，0000， 对于通配符就是这样定义的，对于结合符说的是什么呢？说的就是关系选择器中几种通过文档结果父子关系进行的选择器。所以代码的中* div的特殊性还是和元素选择器相同。

（3）相信大家可以看到上面的红色框最后有一个伪元素的样式应用起来。看起来好像伪元素的优先级很高啊，比内联样式的优先级好高。其实呢不是这样的？我现在将上面的例子修改伪元素的样式：

*::first-line {
    font-size: 22px;
}

接下来就要借助IE浏览器了，因为在chorme浏览器看不到我想要的结果。

相信大家已经看到红色框中结果了，是的现在我们可以看到伪元素选择器存在元素的样式上面，而且位于元素选择器和关系选择器的上面。

但是现在我们只解决一个问题，虽然得到了样式的顺序，可是为什么html还是应用了伪元素的样式，请看下图我们可以看到随着我取消/添加伪元素的样式，html的字体会相应的变化。这里原因如下：

伪元素的样式应用是相当于添加一个元素，这里就是添加了一个<first-line>元素在div中，然后由于字体的样式是可以继承（继承相关的内容可以访问文章）的，所以当前first-line中的样式集成了父元素的first-line的字体为22px的样式。可能你会问就算继承为什么不是继承最终的内联样式的属性，这里可能就是伪元素的规则了。

重要性

上面提到的是一般情况下，当然如果对于很复杂的页面样式来说，可能你想讲之前的所有样式都覆盖，那么就需要使用特殊手段了。有时某个声明可能非常重要，超过了所有其他声明，CSS2.1称之为重要声明。重要声明在声明的结束分号之前插入!important来标志，如果!important放在声明的任何其他位置，整个声明都将无效

如果一个声明是重要声明，则超过所有的非重要声明。现在我们将上面的例子中的通配符样式加上重要说明：如下

#ID-selector {
    font-size: 10px;
}

.class-selector {
    font-size: 12px;
}

*[proprty-selector] {
    font-size: 14px;
}

*:first-child {
    font-size: 16px;
}

div {
    font-size: 18px;
}

* div {
    font-size: 20px;
}

*::first-line {
    font-size: 22px;
}

* {
    font-size: 24px !important;
}

然后我们看一下当前的页面展示效果，可以看到现在应用到的是通配符的属性。

继承

上面已经提到一次继承。这里我们再来看继承的相关知识。对于的继承的总结可以访问继承

继承是从一个元素向其后代元素传递属性值所采用的机制。基于继承机制，样式不仅可以应用到指定的元素，还会应用到它的后代元素。在两个比较特殊的情况需要注意：一个是在HTML中，应用到body元素的背景样式可以传递到html元素；另一个是<a>标签不会继承父元素的文本样式

继承的属性没有特殊性，所以当我们对于元素进行添加选择器的时候，会直接覆盖掉继承来的属性。

继承是CSS中最基本的内容之一，除非有必要的理由，否则一般不会去考虑。

具体的继承可以查看文章（https://blog.csdn.net/it_rod/article/details/61618376#t3）

通配符具有特殊性，虽然特殊性是0，但是还是比继承高的。

层叠

最重要的来了，因为一般我们的开发中不会只有简单的样式，而是很多的样式在一起，那么我们就需要一个规则去辨别最后渲染的样式。

CSS层叠样式表的层叠特性就是让样式层叠在一起，通过特殊性、重要性、来源及继承机制来排列层叠样式的顺序及选出胜出者。

1、重要性和来源需要同时考虑，因为二者的结合使用与否会存在不同的顺序

(1) 不考虑来源的情况下，！important最高。
(2) 在不考虑重要性的前提下，来源优先级顺序为：

读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理声明

(3) 二者一起考虑的情况下，user(用户)的优先级大于author(作者)的优先级，这样做是试图平衡author(作者)和user(用户)。所以，最终的优先级排序为：

user(用户)!important > author(作者)!important > author > user > user agent

简单解释一下：这里说的是我们通过浏览器设置用户css样式的情况下爱，至于如何设置用户样式可以查看文章

举个例子

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>  
    <body>  
        <div>
            测试CSS声明。
        </div>
    </body>  
</html>

/* index.css: author's style sheet  */
div {
    font-size: 14px;
}

div {
    font-size: 16px !important;
}

/* user.css: user's style sheet */
div {
    font-size: 8px;
}

div {
    font-size: 10px !important;
}

我们可以看到上面有两个css文件，但是我们文件中只使用了index.css文件，这个就是创作人员的声明，对于user.css就是我们即将需要操作的user声明。

从上面的操作中可以看到，在没有应用user.css的时候，页面上的文字大小为16px，但是当我们将user.css的样式应用之后，可以看到当前页面的样式变为10px。这里的原因就是上面给的优先级顺序决定的。

2、接着，对于非重要声明来说，按照特殊性排序。特殊性越高的规则，权重越大

3、最后，如果特殊性相同，则按照出现顺序排序。声明在样式表或文档中越靠后出现，权重越大。如果样式表中有通过@import导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表的所有声明在后。

耳东蜗牛

关注

5
点赞
踩
52

收藏

觉得还不错? 一键收藏
2
评论
CSS - 选择器优先级介绍

特殊性从CSS选择器文章中我们知道，与多种不同的方法选择元素。所以当我们使用多种规则的时候，我们必须要明确其中的优先级。但是在CSS选择器的规则中，称之为特殊性，特殊性越高，自然优先级越高。此时我们会先得到一个特殊性说明：！important 特殊性最高，详情访问重要性对于内联样式，加1000对于选中器中给定的ID属性值，加0100对于选择器中给定的类属性值，属性选择或伪类，加0010对于选择器中...
复制链接

扫一扫