精通css(3)-优先级那些事儿

同一个元素可能会有多个样式，这些样式很可能会冲突，css通过层叠的过程来处理这种冲突，简单的说就是给每个规则分配一个重要度。

1.层叠

层叠重要度从高到低排列顺序：

1.标有！important的用户样式；

2.标有！important的作者样式；

3.作者样式；

4.用户样式；

5.浏览器/用户代理默认样式；

2.优先级的计算

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。直接在网页中用sytle="...."的优先级最高，为1000，但是不推荐这样用，你懂的。举个例子：

    div.test1 .span p{...} 优先级= 1+10 +10 +1      span#xxx .songs li {...}优先级=1+100 + 10 + 1      #xxx li {...}优先级= 100 +1 

另外，伪元素的优先值同html 其他元素，伪类的优先值与类的计算一样，还有类似["id=content"]这样的选择器，也跟类的级别一样。

3.继承

继承就是应用样式的元素后代会继承样式的某些属性。这句话很容易理解，但是"某些属性"有些坑啊，你特么到底是哪些属性啊？

首先要明确一点：直接应用于元素的任何样式都会覆盖继承而来的属性。比如你对body设置了font-size：10px;的属性，但是h1，h2都不听你的，因为浏览器默认给h1，h2设置了字体大小，覆盖了继承而来的样式。

然后网页中用到的继承大多都是文本方面的继承，比如font-size，font-color之类的。边框类的属性是不能继承的，比如border，margin，padding什么的，这个要是能继承网页就完蛋了。

有些浏览器在继承方面还有些问题，比如说高贵冷艳的IE，在继承表格字号方面会有些问题。总的来说，在写代码的时候除了文本继承外，其他的都不要指望用继承了，直接用选择器会更好些。