结构和层叠

2018-12-21  本文已影响0人  lindyang
  1. 继承
  2. 特殊性
  3. 声明本身的来源

规则:

选择器 声明块

声明块:

属性: 值(关键字往往由空格分隔)

对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明,如果一个元素有多个冲突的声明,最高特殊性的声明胜出。

  1. ID
  2. 类属性值、属性选择和伪类
  3. 元素和伪元素
  4. 结合符和通配符没有贡献

统配选择器的特殊性为 0 0 0 0,这与根本没有特殊性有区别。
结合符根本没有特殊性。

内联样式的特殊性是 1 0 0 0。(css2.1)

重要性

元素不会把值向上传递到其祖先(除了 body 的 background 向 html 传递)

继承的值没有特殊性,甚至连 0 特殊性都没有(通配符会胜出)。

浏览器有自己的样式表

#toolbar {color: white; background: black;}
#toolbar a:link {color: white;}  /* 覆盖浏览器的默认样式 */
  1. 创作人员
  2. 读者
  3. 用户代理
  • 有 !important 的读者样式最强(胜过有 !important 的创作人员)
  • !important 胜过没有特殊性的
  • 创作人员的样式胜出读者的样式,它们都胜过用户代理。
  • 特殊性大
  • 出现顺序越靠后

声明权重:

  1. 读者的重要声明
  2. 创作人员的重要声明
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户的代理声明

CSS2 内联样式特殊性和 ID 一样,但是顺序靠后

LVHA,考虑到顺序
LHVA,未访问的链接有悬停样式
通过将伪类链接在一起,能缓解特殊性和顺序代理的问题。

非css的表现提示(font元素)特殊性为 0,并出现在创作人员样式表的最前面。

上一篇 下一篇

猜你喜欢

热点阅读