今天普及一下css的层叠、优先级和继承

144 阅读2分钟

冲突规则

css代表层叠样式表(cascading style sheets)

有些时候,我们会发现有些样式是没有起作用的,通常是因为创建多个作用于该元素的规则,而优先级低的规则就不会起作用。

层叠

就是css的规则是堆叠起来的,所以上下的顺序就很重要。两个优先级相同的规则,作用在同一个元素上,在下面的规则起作用。

层叠关系有三个因素:

  1. 资源顺序
  2. 优先级
  3. 重要程度

顺序就是同一个规则,在下面的起作用。

优先级就是越具体越重要。id是100,class是90,标签是1,其他符号不管

内联样式优先于普通样式,可以表示为1000

!important是一个非常重要的标志,覆盖在所有的优先级之上。多用于修改特定的属性

优先级

浏览器是根据优先级来确定当多个规则作用到同一个元素上时候具体用哪一个。

简单来说,优先级就是规则的权重,这和规则的名称的选择器多少还有选择器的权重有关。

继承

在css中,有一些样式是可以被子元素继承的,有些则不可以被继承。

当可以继承的样式在父元素上定义时,子元素也会有相同的样式,除非在子元素上重新定义该样式。

控制继承

  1. inherit——设置该值会使得子元素属性和父元素相同
  2. initial——将选定元素的值设置为初始值。
  3. revert——将选定元素的值重置为浏览器默认值
  4. revert-layer——将选定元素的值重置为上一个设置的值
  5. unset——将属性重置为自然值