CSS样式--层叠（三）

CSS样式–层叠（三）

---

前言

前端界面开发的时候，经常会引入很多样式，而且还有把样式写在js里面控制的（如：使能按钮）或内嵌到元素的或有的在规则后面加!important，随着版本的迭代，各种样式被覆盖，样式的调整真的惨目忍睹。

层叠

css是Cascading Style Sheets 的缩写，这表示在css中层叠的概念很重要，也就是css规则的顺序很重要，影响规则的三个因素如下：

• 重要性（Importance）—属性后面加 ！important
• 专用性（Specificity）–衡量选择器具体程度的方法（它能匹配多少元素）
• 源代码次序（Source orde）–相同优先级的先声明的优先级高
  优先顺序：重要性 > 专用性 > 源代码次序
  

重要性和源代码次序就不多说，关键是专用性，mdn解释：一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：
1.千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
2.百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
3.十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
4.个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

---

eg：

选择器	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#indentifier	0	1	0	0	0100
h1 + p::first-letter	0	0	0	3	0003
li > a[href*=”zh-CN”] > .inline-warning	0	0	2	2	0022(十位：一个类选择器（.inline-warning）和一个属性选择器（[href*=”zh-CN”]），个位：两个元素选择器（p、a）)
没有选择器，规则在一个元素的 <\style>属性里	1	0	0	0	1000

继承

CSS为处理继承提供了四种特殊的通用属性值：

1.inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。
2.initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
3.unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。
4.revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。
**备注：**css的all属性和重置所有继承属性，且并不是所有属性都可以继承，如：margin、padding、border、background-image等继承是没有意义的，而像font-family、color继承是有意义的。