CSS（2）CSS层叠、继承与优先级

样式表层叠 Stylesheets Cascade

元素会被多个样式一层层作用

  • 没有冲突时样式层叠
  • 发生冲突时根据权重决定使用哪种样式，相同权重的规则应用最后出现的
  • 可以使用 !important 强制提升某个规则的权限
  h2 {
     color: red !important;
  }

各类元素的权重：

规则 权重
ID 0100
class、类属性值 0010
标签、伪元素 0001
* 0000
行内样式 1000

注： 继承没有权重，通配符和继承会优先选通配符

继承 Inheritance

  • 当元素的一个继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值。文档根元素取该属性的概述中给定的初始值。

  • 某些样式不会被继承，如边框、高度等。称为非继承属性(在Mozilla code 里有时称之为reset property )

  • 举个例子如果你在一个元素上设置 width 50% ，所有的后代不会是父元素的宽度的50% 。如果这个也可以继承的话，CSS就会很难使用了!

  • 当元素的一个非继承属性没有指定值时，则取属性的初始值

在css中，每个CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的("Inherited: no")。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容