CSS - 优先级

最新推荐文章于 2024-06-02 18:45:32 发布

放羊的牧码

最新推荐文章于 2024-06-02 18:45:32 发布

阅读量307

点赞数 1

分类专栏： # HTML/CSS/JS 文章标签： CSS 前端

原文链接：https://www.cnblogs.com/zxjwlh/p/6213239.html

版权

HTML/CSS/JS 专栏收录该内容

93 篇文章 5 订阅

订阅专栏

CSS三大特性 —— 继承、优先级、层叠

继承：即子类元素继承父类的样式。
优先级：是指不同类别样式的权重比较。
层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

CSS选择符（选择器）分类

标签选择器(如：body,div,p,ul,li)
类选择器(如：class="head",class="head_logo")
ID选择器(如：id="name",id="name_txt")
全局选择器(如：*号)
组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
继承选择器(如：div p,注意两选择器用空格键分开)
伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、hover、active)
字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
子选择器 (如：div>p ,带大于号>)
CSS相邻兄弟选择器器 (如：h1+p,带加号+)

CSS优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

一、第一种理解方式：

（1）不同级别

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

（2）同一级别

同一级别中后写的会覆盖先写的样式。上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div.test{
            background-COLOR:#a00;
            width:100px;
            height: 100px;
        }

        .test.test2{
            background-COLOR:#0e0;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="test test2"></div>
</body>
</html>

到底 div 是应用那条规则呢，有个简单的计算方法（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个 class 也不如一个 id 权值高）

内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2变成绿色。

二、第二种理解方式：

CSS优先级：是由四个级别和各级别的出现次数决定的。
四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0

若是行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符/伪元素选择符，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

三、注意事项：
①、!important的优先级是最高的，但出现冲突时则需比较“四位数“
②、优先级相同时，则采用就近原则，选择最后出现的样式
③、继承得来的属性，其优先级最低
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
*css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。

四、CSS选择器的解析原则：

以前一直认为选择器的定位DOM元素是从左向右的方向，查看了网上的相关资料之后才发现原来自己一直都是错的。郑重的声明选择器定位DOM元素是从右往左的方向，这样的好处是尽早的过滤掉一些无关的样式规则和元素。为什么CSS选择器是从右往左解析？点击打开链接

放羊的牧码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS - 优先级

CSS三大特性 —— 继承、优先级、层叠：继承：即子类元素继承父类的样式。优先级：是指不同类别样式的权重比较。层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。CSS选择符（选择器）分类：标签选择器(如：body,div,p,ul,li)类选择器(如：class="head",class="head_logo")ID选择器(如：id="name",id="name_txt")全局选择器(如...
复制链接

扫一扫