层叠和继承

hello

div h1 { color: red; } .title { color: blue; }

以上代码会让h1显示什么颜色?答案是蓝色。这就涉及到了CSS选择器的优先级(特异度)。


层叠和继承_第1张图片
selector-speciality.jpeg
层叠和继承_第2张图片
speciality-level.jpeg

属性覆盖:优先级高的属性会把优先级低的属性覆盖。如上述代码,.title的优先级高,所以即使div h1在顺序上是先设置的样式,但是还是被优先级更高的给覆盖了。
使用tip:例如对按钮设置样式的时候,按钮通用的样式可以写在优先级的样式中,然后特定的按钮样式在写在优先级较高的样式中。

!important,最高优先级的属性规则,一般情况下无法被其他样式覆盖。

    
hello
#demo { color: blue; } div { color: red !important; } 最终文本显示红色。

但是在优先级较高的样式中使用!important可以覆盖优先级较低的样式的!important
尽量不要使用!important


Cascading 层叠
设置样式的规则

  1. 找出匹配到该属性的所有声明
  2. 根据规则来源,从优先级从低到高
  • 浏览器预设
  • 用户设置
  • 网页样式
  • !important的网页样式
  • !important的用户设置样式
  1. 同一来源中,按照特异度排序,越特殊优先级越高
  2. 特异度一样时,按照样式书写顺序,后面的优先级高

继承
某些属性会自动继承其父元素的计算值

hello

div { color: red; }

hello的颜色会变成红色,因为

中的设置颜色的样式会从父元素

中继承。

你可能感兴趣的:(层叠和继承)