样式应用规则

CSS (cascading style sheets) 层叠样式表。其关键点就是在层叠上

  1. 重要性(Importance)
  2. 专用性(Specificity)
  3. 源代码次序(Source order)

!important

这个是跟随在css属性值后的一个关键字,将会打乱正常的规则应用方式,仅仅适合一些不便于修改样式但是又想修改的情况下,强制覆盖。

css选择器计算规则

在选择器那章已经提及了计算方式,因此这里不再叙说

源代码顺序

css就像糊墙一样,在相同材料(计算权重)下面,总是后来的糊在先来的上面

样式混合

css中是可以样式混合的,会从相同的选择匹配的样式中叠加一起,按照权重不同择优。最终得到完整的样式表。


这是一个span

最终应用的内容则是 color:green;font-size:20px;因为权重关系,span的color属性被.text-span覆盖。

属性继承

继承样式是一个非常重要的点,有一些属性是属域可以继承的,比如最常见的font相关属性,如果不设置都会从父级继承

  • inherit 自然继承,元素的该样式属性将和父元素相同属性保持一致
  • initial 初始值继承,这个属性是由浏览器控制的,将从浏览器设定的初始值上继承该属性 IE不支持
  • unsetinheritinitial的结合体,如果该属性默认可继承,则应用inherite否则应用initial IE不支持
  • revert 如果user agent stylesheet中支持该属性,则从用户样式表里面获取,否则应用initial。只有safari9.1+和ios9.3+支持

补:归零属性 all

在继承环节里面,有一个归零操作,当应用该属性时,结合继承关系,将该元素上所有的样式重置


这是一个span

你可能感兴趣的:(样式应用规则)