CSS基础-层叠与继承

 

 

 

继承

一些属性可以被继承，一些不可以。

一般来说，字体颜色、字体大小会被继承，关于形状的如 padding 、border 、margin、width等就不会被继承。哪些属性属于默认继承很大程度上是由常识决定的。

 

控制继承

CSS提供了四个通用属性值来控制继承，每个CSS属性都可以接收这些值。

• inherit 继承父元素的属性值
• initial  设置属性值和浏览器默认样式相同
• unset  将属性重置为自然值，如果有inherit的话就是inherit，否则和initial一样
• revert  很少浏览器支持

 

重设所有属性值

all : unset initial inherit  revert

  撤销对所有样式所做的更改，以便回到之前已知的起点。

---

层叠

有时对于一些元素有多条规则，那么应该选用哪条规则应用于这些元素？

根据重要性从上到下，有三个因素需要考虑：

• 资源顺序

　　　　当两条同级别的规则应用到同一个元素上时，写在后面的规则就是实际使用的规则。

• 优先级

　　声明在style属性(内联样式) > ID选择器 >类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器

　　选择范围越小，优先级越高，因为越精确。

　　因此通用的做法是，给基本元素定义通用的样式，根据需求再创建不同的类。 

 

选择器属性优先级计算：

一个选择器的优先级由四个部分相加 ，可以认为是个十百千 —— 四位数的四个位数：

1. 1. 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
   2. 百位： 选择器中包含ID选择器则该位得一分。
   3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
   4. 个位：选择器中包含元素、伪元素选择器则该位得一分。

注意：

1. 通用选择器（*）、组合符合（>, ~, +, ' '）和否定伪类(: not) 不会影响优先级。

2. 计算时不能进位，即20个元素选择器的叠加 也不能超过一个类选择器。

 

• ! important

　　　　! important 优先级最高，能够覆盖普通规则的层叠。

　　　　覆盖 ! important 的唯一办法是用另一个位置靠后或者具有更高优先级的 ! important 覆盖它。

　　　　但是我们应该尽量避免使用这个属性，因为调试起来会不方便。