css优先级比较，不得不知的CSS优先级及我们的建议
css优先级比较，不得不知的CSS优先级及我们的建议这3条CSS规则都选定了上述的p元素，但是浏览器只能用一种颜色来绘制文本。类似这样的样式冲突，究竟哪个规则会起作用呢？#introduction{ color: red;}我们分别使用标签（tag）、类（class）和ID选择器来设置元素的颜色：p{ color: blue;}.message{ color: green;}
由于前面章节所述的CSS继承特性以及多种类型的选择器作用域范围会出现重叠，所以常会有多个CSS规则作用于同一个HTML元素。比如对于下面的HTML代码：
<p class="message" id="introduction">
CSS优选级课程.
</p>
我们分别使用标签（tag）、类（class）和ID选择器来设置元素的颜色：
p{ color: blue;}
.message{ color: green;}
#introduction{ color: red;}
这3条CSS规则都选定了上述的p元素，但是浏览器只能用一种颜色来绘制文本。类似这样的样式冲突，究竟哪个规则会起作用呢？
答案是靠级联（cascade）。
级联将结合重要性、具体性（或称为特殊性：Specificity）以及出现的顺序来决定每一种样式属性的权重， 这个权重将会用来决定浏览器将会采用哪一种样式属性，权重高的则优先使用（具有更高的作用优先级）。上例中p的颜色将会是红色，因为 #id 选择器是最具体的也因此是最重要的。
内联样式（inline styling） 权重 1000
ID（#id） 权重 100
类（.class） 权重 10
标签（tag） 权重 1
然后你可以把多个选择器的权值相加，来得到最终的Specificity：
-
p 具体性 1 (1个标签选择器)
-
div p 具体性 2 (2个标签选择器 1 1)
-
tree 具体性 10 (1个类选择器)
-
div p.tree 具体性 12 (2个标签选择器 1个类选择器 1 1 10)
-
#baobab 具体性 100 (1个id选择器)
-
body #content .alternative p 具体性 112 (标签选择器 id选择器 class选择器 标签选择器 1 100 10 1)
选择器具体性的完整计算公式要比上面复杂得多，但了解上面的法则在一般情况下已经足够。
第四步，判断样式属性出现的先后顺序这一步最简单，出现晚的选择器将拥有高优先级，也就是后来者居上。
对于外部引入的样式表，@import比link拥有更高的优先级，不管它是否出现在link引入之后。
理解了上述的优先级计算规则，我们应该可以推断出前面例子中p元素的最终颜色：
#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}
<p class="message" id="introduction">
HTML/CSS高级教程。
</p>
如何避免冲突尽管浏览器能够处理CSS样式冲突，但避免不必要的样式冲突仍然是一个好的编程习惯，即可以避免意外的样式覆盖，也有助于减少无谓的优先级计算。
我们推荐的编码规范是：
-
尽量使用 class，而不是id，即使该元素在HTML文档中只出现过一次
-
避免在一个HTML元素上使用多个类：不建议这样写 <p class="big red important">，建议写成 <p class="title">，后者具有更好的语义描述性
-
避免使用内联样式（inline styles） 比如 <div style="background: blue;">
当然上面的只是一般性建议，很多场合下给一个HTML元素添加多个类是有益的，比如给所有希望被隐藏的元素加上hidden类（display:none），可以提高样式代码的复用度。
