乐趣区

关于css:这次彻底搞定CSS层叠优先级

层叠 常识图谱

CSS 实质

CSS 实质上就是申明规定,即在各种条件下,咱们心愿产生特定的成果。浏览器会依据咱们书写的规定去决定如何渲染页面。

什么是层叠

层叠指的就是 css 中的一系列规定。决定了如何解决抵触,是 CSS 语言的根底。

层叠规定

这些规定就是拿来解决抵触的。

(1) 样式表的起源:款式是从哪里来的,包含你的款式和浏览器默认款式等。

(2) 选择器优先级:哪些选择器比另一些选择器更重要。

(3) 源码程序:款式在样式表里的申明程序

术语解释

@规定(at-rules)是指用“@”符号结尾的语法。比方 @import 规定或者 @media 查问

样式表的起源

作者样式表

咱们本人写的样式表就是作者样式表

用户代理样式表

浏览器有一个默认的样式表,也就是用户代理样式表。

用户样式表

这是第三种起源,它的优先级介于 用户代理样式表和作者样式表之间。用户样式表很少见,并且不受网站作者管制,因而 这里略过

1. 用户代理款式

浏览器先利用用户代理款式后才会利用作者样式表,后者会笼罩前者。

2. !important 申明

标记了!important 的申明会被当作更高优先级的起源,因而总体的优先级依照由高到低

优先级别离是 !important > 作者样式表 > 用户代理样式表

了解优先级

1. 行内款式

在 HTML 的 style 属性间接写款式,优先级最高,笼罩任何来自样式表或者 <style> 标签的款式。

2. 选择器优先级

有 3 大类选择器。他们有不同的优先级。

如果选择器的 ID 数量更多,则它会胜出(即它更明确)。
如果 ID 数量统一,那么领有最多类的选择器胜出。
如果以上两次比拟都统一,那么领有最多标签名的选择器胜出。

口诀是遇同级比数量,遇不同级,找高级,全一样,看先后,后者胜。

3. 优先级标记

一个罕用的示意优先级的形式是用数值模式来标记,通常用逗号隔开每个数。

“1,2,2”示意选择器由 1 个 ID、2 个类、2 个标签组成。

有 3 数和 4 个数的写法。4 个数的写法多了一个数示意代表一个申明是否 是用行内款式增加的。用 0,1 示意。

源码程序

如果两个申明的起源和优先级雷同,其中一个 申明在样式表中呈现较晚,或者位于页面较晚引入的样式表中,则该申明胜出。

a 链接属性书写程序
a:link {
  color: blue;
  text-decoration: none;
}
a:visited {color: purple;}
a:hover {text-decoration: underline;}
a:active {color: red;}

记忆:LV 好啊(lvha)

两条教训法令

1. 能不必!important 就不必。
2. 在选择器中不要应用 ID

退出移动版