选择器类型
开发者在使用CSS进行网页开发时需要使用选择器来指定样式要应用的元素，在开发时主要有以下几种选择器。
id：以元素的id作为选择器，例如：
#foo {
color: red;
}
class：以元素的class作为选择器，例如：
.bar {
color: red;
}
tag：以元素的标签（tag）作为选择器，例如：
p {
color: red;
}
*：选中全部元素，这种情况下的样式会被应用在所有的元素上，例如：
* {
color: red;
}
除了用CSS给元素加样式，在HTML中也可以给元素加上行内样式，例如：
<p style="color: red">I'm red</p>
这行代码在网页中会渲染出红色的文字。
选择器优先级权重
当计算优先级时，我们可以使用0, 0, 0, 0四个数位对一个选择器的优先级进行计算权重，这四个数位的从左至右优先级递减，也就是最左边的一位优先级最高。
在比较优先级时，先看两个选择器不为0的最高位，位更高的优先，如1, 0, 0, 0选择器优先级高于0, 1, 0, 0的选择器。
如果最高位相同，则比较最高位的大小，如果仍相同则比较下一位的大小，以此类推，如0, 2, 0, 0优先级高于0, 1, 0, 0，0, 2, 1, 0优先级高于0, 2, 0, 0。
那么，如何将一个如#foo .bar p { color: red }这样的选择器转化为四个数位的优先级呢？规则如下：
第一数位 - 行内样式：使用行内样式时样式的优先级是1, 0, 0, 0，例如：
<!-- 1, 0, 0, 0 -->
<p style="color: red">I'm red</p>
第二数位 - id选择器：选择器中每有一个id，会给选择器优先级的第二位加1的权重，例如：
/* 0, 2, 0, 0 */
#first #second {
color: red;
}
/* 0, 1, 0, 0 */
#second {
color: blue;
}
这时候如果我们有如下的HTML：
<div id="first">
<p id="second">Hello</p>
</div>
网页中的文字Hello的颜色就会被渲染为红色，因为第一个选择器的优先级更高。
第三数位 - class选择器：选择器中每有一个class，会给选择器优先级的第三位加1的权重，例如：
/* 0, 0, 2, 0 */
.one .two {
color: green;
}
/* 0, 0, 1, 0 */
.two {
color: yellow;
}
这时候如果我们有如下的HTML：
<div class="one">
<p class="two">Hello</p>
</div>
<p class="two">World</p>
网页中的文字Hello会被渲染为绿色，World会被渲染为黄色。
第四数位 - 标签选择器：选择器中每有一个标签（tag），会给选择器优先级的第四位加1的权重，例如：
/* 0, 0, 0, 2 */
div p {
color: orange;
}
/* 0, 0, 0, 1 */
p {
color: purple;
}
这时候如果我们有如下的HTML：
<div>
<p>Hello</p>
</div>
<p>World</p>
网页中的文字Hello会被渲染为橙色，World会被渲染为紫色。
我们再来看几个id，class和tag被组合在一个选择器中时的例子：
/* 0, 1, 2, 1 */
#first .one.two > p {
color: red;
}
/* 0, 2, 1, 1 */
#first #second > div.one {
color: blue;
}
特殊情况
还有一些特殊的选择器，它们不在刚刚的四数位权重之中，我们来讨论一下这些特殊情况。
!important：这是CSS中的一个关键字，它具有超越一切的权重，如果选择器中有这个关键字，即使是行内样式也会被它覆盖，例如：
<p class="foo" style="color: red;">Hello</p>
<p class="bar" style="color: red;">World</p>
.foo {
color: blue !important;
}
.bar {
color: blue;
}
根据刚才的权重规则，行内样式有比class更高的优先级，但是由于!important的存在，使得例子中Hello显示为蓝色，而World按优先级规则显示为红色。
注意：不推荐在实际开发中使用!important关键字，请尽量用其他方法代替。
*：这是CSS中选择全部元素的选择器，它具有非常低的优先级，相当于0, 0, 0, 0，任何行内样式、id选择器、class选择器或者是标签选择器都会覆盖它，例如：
<div>Hello</div>
<p>World</p>
* {
color: red;
}
p {
color: blue;
}
网页中的文字Hello被*选择器命中，渲染为红色，World被优先级更高的标签选择器命中，渲染为蓝色。
继承样式：HTML中如果子元素会自动从父元素继承样式，它具有最低的优先级，相当于0, 0, 0, 0，任何行内样式、id选择器、class选择器、标签选择器，甚至是选择全部元素的选择器，都会覆盖它，例如：
<p>
<span>Hello</span>
</p>
p {
color: green;
}
* {
color: yellow;
}
如果没有*选择器的内容，Hello会被渲染为绿色，因为它继承了父元素的样式，与继承相比，*选择器优先级更高，所以在这里Hello被渲染为黄色。
动手试试
为了更清楚地让大家了解CSS选择器优先级在网页中呈现的效果，我在CodePen上准备了可以执行查看效果的代码，喜欢的话可以动手试试。