CSS级联示例

时间:2012-06-27 15:49:08

标签: css css-cascade

有些人可以举一个例子来描述CSS中的级联,它们什么时候有用?我已经看到了描述cascading的答案以及cascading and inheritance 之间的差异,但我没有看到任何通过示例描述CSS Cascading 的答案。

2 个答案:

答案 0 :(得分:3)

当只考虑“作者”样式表(不是用户代理或用户代理)时,你可能感到困惑的不是“级联”,而是CSS的“特殊性”规则。

以下是关于特异性如何工作的一些很好的解释以及如何弄清楚为什么某些规则适用于你的元素:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

http://css-tricks.com/specifics-on-css-specificity/

编辑:级联: 收集元素的所有适用规则,然后根据其来源排序(更高的数字意味着更高的优先级):

  1. 用户代理声明
  2. 用户正常声明
  3. 作者正常声明
  4. 作者重要声明
  5. 用户重要声明
  6. 如果原点相同,则将特异性用作决胜局。最后,如果特异性相同,则声明顺序是最终的打破平局。希望没有繁琐的例子,这是可以理解的......

答案 1 :(得分:1)

级联:请参阅http://www.maxdesign.com.au/articles/css-cascade/上的幻灯片以获得更好的解释

继承与级联:

“继承是一种独立于级联的机制:继承适用于DOM(文档对象模型)树,而级联处理样式表规则。但是,通过级联在元素上设置的CSS属性可以继承通过该元素的子元素。“ - http://reference.sitepoint.com/css/inheritance