CSS学习笔记:层叠和继承
2016-10-27 22:12
211 查看
特殊性
对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明上。如果元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出。ID选择器:0 1 0 0
类选择器、属性选择器、伪类选择器:0 0 1 0
元素选择器、伪元素选择器: 0 0 0 1
结合符和通配符对特殊性没有任何贡献
要注意几点:
ID选择器和指定id属性的属性选择器在特殊性上不同
内联样式比其他声明的特殊性都高,也就是 1 0 0 0
重要性
有时某个声明可能非常重要,超过了其它所有声明,那么就允许在这些声明的结束分号之前插入 !important 来标志。注意:
每一条声明都需要它自己的!important标志。
!important总是放在声明的最后,分号的前面;在其他位置都不会生效。
标志为!important 的声明并没有特殊的特殊性值,并且与未标注的声明分开考虑。所有!important 声明会分组在一起,它们的特殊性冲突会在其内部解决,而不会与非重要声明相混。
类似的,我们认为所有非重要声明也归为一组,使用特殊型来解决冲突。
如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。
继承
基于继承机制,样式不仅应用到指定的元素,还会应用到他的后代元素。不是所有属性都能继承。
继承的值没有特殊性,比0特殊性还要弱
层叠
CSS的层叠规则如下:找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
按权重和来源对所有应用到该元素的声明排序:
标志!important的规则的权重要高于没标注的;(也高于内联样式)
开发者样式、用户样式……
按特殊性对应用到元素的所有声明排序
按出现顺序对应用到元素的所有声明排序
一个声明在样式表中越后面的位置出现,它的权重就越大。
即如果两个规则的权重、来源和特殊性都完全相同,那么在样式表中后出现的会胜出。
注意:一般认为元素style属性中指定的样式(即内联样式)位于文档样式表的最后。
正是由于这种按顺序排序,所以才有了通常推荐的链接样式顺序:link-visited-hover-active,其实link和visited的顺序不重要。
相关文章推荐
- 前端学习笔记4:CSS的继承、层叠和特殊性
- 学习笔记——CSS的高级特性:复合、继承、层叠
- CSS 层叠 学习笔记
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
- 【CSS笔记四】CSS的继承、层叠和特殊性
- CSS基础学习笔记-1:CSS样式继承
- CSS继承-学习笔记
- CSS学习笔记:级联和继承
- [CSS2盒模型]--div学习笔记一
- tij学习笔记 多态,继承
- CSS入门学习笔记[1]
- XHTML+css,web标准学习笔记1——DOCTYPE声明
- Spring学习笔记之Bean定义继承
- CSS学习笔记
- c++入门学习笔记继承
- Css学习笔记(一)
- Java构造函数的继承-Java 学习笔记 (14)
- CSS学习笔记 ---转
- JAVA学习笔记之七继承和多态
- C#学习笔记(六):继承