层叠 常识图谱
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