CSS札记（二）：级联与继承

1、级联

概念:级联（The cascade）,CSS是Cascading Style Sheet的简写，说明级联是很是重要的。从表层来看，级联代表CSS规则的顺序问题，可是级联远比这个复杂，在全部的选择器中摸个选择器定义的规则是否可以胜出（既优先级）取决于三个元素：Important,Specificity,Source order。

一、！Important声明（Important）

在css规则的值末尾添加“！Important”可以保证该规则优先其它规则，可是通常不建议使用“！Important”,由于它会改变联级的工做方式，使得调试变得困难。

例如：
<style>
    #winning{
        background-color:red;
        border:1px solid black;
    }
    .better{
        background-color:gray;
        border:none !Important;
    }
</style>
<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all</p>

二、Specificity

经过四个特性值来量化一个选择器

2.1. Thousands

Inline style(嵌入式样式)，即直接写在元素里面，加1,0,0,0
例： <h1 style=”color:#fff;”>

2.2. Hundreds

包含在一个选择器中全部的ID选择器
例：#div

2.2. Tens

包含在一个选择器中的全部 类属性选择器，类选择器，伪类选择器
例：.classes、[attributes]、#focus:hover

2.4. Ones

包含在一个选择器中的全部元素选择器，伪元素选择器
例： ::after

三、代码顺序 (Source order)

若是多个竞争选择器具备相同的重要性和特性值，代码顺序就发挥做用了，后来规则优先前面规则。

2、继承（Inheritance）

CSS中有些规则将会默认被子元素继承，有些则不会。好比font系列属性，文本系列属性、列表系列属性，cursor
CSS提供了三个特殊的值用来处理继承

1) inherit 继承父元素的样式    
2) initial 不继承。应用浏览器的默认样式    
3) unset 不设定，表现该规则原本特性，即若是该规则具备继承属性则继承，不然不继承。