CSS选择器优先级

CSS的作用是给页面提供显示效果的，但是有时我们会发现，代码中的CSS并不是都能给页面带来预期的效果。这时我们就需要意识到CSS选择器的优先级问题，因为对于同一个元素来说，优先级高的CSS会覆盖优先级低的CSS。

CSS分类：

三种基本的选择器类型：标签选择器、类选择器和ID选择器，如：

p{
    /*...*/
}
.className{
    /*...*/
}
#idName{
    /*...*/
}

常用的扩展选择器有两种：后代选择器、群组选择器，如：

.className p{
    /*...*/
}
.className1 ,.className2{
    /*...*/
}

选择器的优先级规定：

要说明优先级问题，我们先引入一个概念——特制度（specificity），表示一个CSS选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要，优先级越高。
即，针对一个CSS选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个标签就往特指度数值中加1。如：

.className1 p{
    ...
}//特指度=10+1=11

#idName .className p{
    ...
}//特指度=100+10+1

此外，在标签内引入CSS的方式优先级为1000,!important优先级最高，*优先级最低。

附：后台选择器的定位原则

对于后代选择器，浏览器是如何查找元素的：浏览器CSS匹配是从右向左进行查找的，比如div#divBox p span.red{color:red}，浏览器的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再找父辈元素中是否有p元素，在判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
浏览器从右到做进行查找的好处是今早过滤掉一些无关的样式规则和元素。