CSS - 选择器优先级介绍

特殊性

从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导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表的所有声明在后。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页