css层叠优先级,CSS样式的优先级（层叠）

CSS叫做层叠样式表

Cascading Style Sheets

层叠样式的概念是非常重要的，在最基础的层面上表示了CSS规则的顺序很重要，但是它更加复杂。什么选择器在层叠中胜出取决于三个因素

重要性 importance

专有性 specificity

源代码次序 source order

重要性

CSS中，有一个特殊的语法享有绝对优先级 ! important 把他加载在属性值的后面，可以让这条声明拥有最高优先级。

字符字符字符字符字符字符

p {

color:red ! important;

}

#app {

color:black

}

一旦设置了 !important，那么源代码次序即使是在后面，也不会起效果。同时，专有性也不会其效果。

但也并非绝对

如果你合理的利用源代码次序和重要性这两个特性，

字符字符字符字符字符字符

p {

color:red ! important;

}

#app {

color:black ! important

}

(不建议)(不建议)(不建议)(不建议)(不建议)(不建议)

由于大家都是!important 而且按照源代码次序，那么后来的color一定会把前面的颜色给覆盖掉。

(不建议) (不建议)(不建议)(不建议)

因为大量的事实证明！important 本身的出现往往是不得已而为之的情况，也就是说只有到了你不得不使用它(事实证明，极少出现这种情况，往往是因为懒)。

为什么重要性 !important 不建议使用？

因为 !important 很重要的一点是，他改变了另外两条CSS的层叠规则！

一旦使用了绝对权力的 !important ，层叠顺序就会乱了套，在大型项目中往往会出现很多不可预期的错误。

专有性

专有性是基本上衡量选择器具体成都的一种办法 --- 它能够匹配多少元素

不同的选择器对应的优先级完全不同，其中ID选择器是最高的。

选择器

千位

百位

十位

个位

总计值

0001

#id

0100

h1+p::first-letter

0003

li>a[name='demo'] > .inline

0022

无选择器，位于style属性中

1000

注意通用选择器(*) 符合选择器(+ > ~ '')以及否定选择伪类(:not) 不会影响优先级。

不过由于他们之后往往都跟随者其它选择器，所以还是要注意。

源代码次序

如果比较了重要性和专有性之后，依然没有比较出来谁胜利，那么久按照后来者优先，由源代码次序来决定获胜。

混合规则

注意！！！注意！！！

以上所有的规则均没有优先级之分，也就是说三个规则会同时其效果，层叠样式才是最佳实践。

前面所说的，我们利用 !important来重写后面的规则，其实就是破坏了层叠的顺序(源代码次序凌驾于!important之上)，导致了谁靠后引入，谁就更高优先级。

字符字符字符字符字符字符

p {

color:red ! important;

}

#app {

color:black ! important

}

css层叠优先级,CSS样式的优先级（层叠）相关推荐

html和css哪个优先,CSS3 | 样式和优先级
css3一般介绍: CSS注释:/*CSS*/ CSS长度单位: 1.px(像素) 2.em(倍数,一般用于文字) 一.HTML嵌套CSS3样式: 1.外部(推荐) 例如HTML文件为index.ht ...
css的四种样式及其优先级
目录 1.行内样式代码 2.内嵌样式代码 3.外链样式代码 4.导入样式 5.四种样式的优先级 1.行内样式行内样式又叫标签样式,它是在标签里面加上style属性代码 <body> ...
span标签style的优先级_css样式引入优先级？
css中的优先级讲的有 1.选择器的优先级. 2.样式引入的优先级. 今天要研究的是样式引入的优先级.网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何. 四种样式的优先级别是:行 ...
JQuery中.css()与.addClass()设置样式的区别
对于样式的设置,我们学了addClass与css方法,那么两者之间有什么区别? 可维护性: .addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类.css方法是通过Ja ...
CSS基础(part4)--CSS的层叠性继承性优先级
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS CSS层叠性 CSS继承性 CSS的优先级(特殊性) 复合选择器的优先级关于优先级权重的注意事项 CSS CSS层叠性所谓层 ...
CSS中的层叠性、继承性、优先级、权重
css三大特性: 三大特性:层叠性.继承性.优先级层叠性: 指多种css样式的叠加,是浏览器处理多种css样式冲突的能力,如果给一个元素通过不同或者相同的选择器设置相同的属性但属性值不同时,权重相同 ...
CSS 的三个特性：层叠性、继承性、优先级
层叠性 CSS 有三个非常重要的三个特性:层叠性.继承性.优先级. 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突的问题层叠性原则:  样式冲突 ...
讲给后台程序员看的前端系列教程(19)——CSS的层叠性与继承性以及优先级
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
web前端学习128-134（CSS三大特性---层叠性，继承性，优先级）
文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级 1 CSS的三大特性 CSS有三个非常重要的三个特性︰层叠性.继承性.优先级. 1.1 层叠性相同选择器给设置相同的样 ...
CSS学习（第三天）（层叠性、继承性、优先级，CSS 盒子模型）
紧接第二天 CSS学习第三天 5 CSS的三大特性 5.1 层叠性 5.2 继承性 5.2.1 行高的继承 5.3 优先级 5.3.1 优先级(注意) 5.3.2 优先级(权重叠加) 6 CSS 盒子 ...

css层叠优先级,CSS样式的优先级（层叠）

css层叠优先级,CSS样式的优先级（层叠）相关推荐

最新文章

热门文章