3.结构和层叠 特殊性|继承|层叠

继承(inheritance)：是一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，用户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程称作层叠(cascade)。

特殊性 权重

选择器的特殊性：特殊性值（权重）:0000

1. ID:                                       0100
2. 类属性、属性选择、伪类： 0010
3. 元素、伪元素：                   0001
4. 结合符、通配选择器没有作用 空格 + >这些符号没有啥作用主要还是看是元素类ID
5. 内联样式                              1000

权重计算：

        h1{colo:red;} /*权重 = 0001*/
        p em{color:red;}/*权重 = 0002*/
        .grape{color:red;}/*权重 = 0010*/
        *.bright{color:red;}/*权重 = 0010*/
        p.bright em.dark{color:red;}/*权重 = 0022*/
        #id123{color:red;}/*权重 = 0100*/
        div#sidebar *[href]{color:red;}/*权重 = 0111*/

下面的例子：

html > body table tr[id="totals"] td ul > li{color:red;}/* 0017  [id="totals"]这个为0010*/
li#answer{color:blue;}/*0101*/  /*这个强调一下li#answer是li的id为answer，而li #answer是li后代有id:answer*/  

内联样式 style=""是最大的权重为1000

重要性 !

!important超过其他声明 记住分号之前插入

h2#title{font-size:10px !important;color:red;}
<h2 id="title" style="font-size:40px;color: green;">重要性栗子！！！</h2>

上面显示的是10px绿色字体

继承

样式会应用到它的后代元素，但是有些属性不能被继承，例如horder，大多数盒模型属性不能被继承（外边距 内边距 背景和边框）

0特殊性比无特殊性强

*{color:blue;}
h1#page{color:red;}
 <h1 id="page">特殊性例子<em>0特殊性</em></h1>

em元素颜色蓝色，不会继承，因为用了*通配符，默认指定了蓝色了。 通配符0特殊性

层叠

P89。。