结构和层叠
2018-12-21 本文已影响0人
lindyang
- 继承
- 特殊性
- 声明本身的来源
规则:
选择器 声明块
声明块:
属性: 值(关键字往往由空格分隔)
对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明,如果一个元素有多个冲突的声明,最高特殊性的声明胜出。
- ID
- 类属性值、属性选择和伪类
- 元素和伪元素
- 结合符和通配符没有贡献
统配选择器的特殊性为 0 0 0 0,这与根本没有特殊性有区别。
结合符根本没有特殊性。
内联样式的特殊性是 1 0 0 0。(css2.1)
重要性
- 重要声明
- 非重要声明
重要规则总会胜出。
元素不会把值向上传递到其祖先(除了 body 的 background 向 html 传递)
继承的值没有特殊性,甚至连 0 特殊性都没有(通配符会胜出)。
浏览器有自己的样式表
#toolbar {color: white; background: black;}
#toolbar a:link {color: white;} /* 覆盖浏览器的默认样式 */
- 创作人员
- 读者
- 用户代理
- 有 !important 的读者样式最强(胜过有 !important 的创作人员)
- !important 胜过没有特殊性的
- 创作人员的样式胜出读者的样式,它们都胜过用户代理。
- 特殊性大
- 出现顺序越靠后
声明权重:
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户的代理声明
CSS2 内联样式特殊性和 ID 一样,但是顺序靠后
LVHA,考虑到顺序
LHVA,未访问的链接有悬停样式
通过将伪类链接在一起,能缓解特殊性和顺序代理的问题。
非css的表现提示(font元素)特殊性为 0,并出现在创作人员样式表的最前面。