当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢，下面我总结了一些解决 CSS 优先级问题的常用法则。
样式距离
我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式，此时的优先级是:
外部样式 < 内部样式 < 内联样式
这个应该比较容易理解，也就是说离元素距离越近的样式优先级越大。如：
CSS Code复制内容到剪贴板
<style type="text/css">
div{color:blue;} //内部样式
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)
<div style="color:red">my color</div>//内联样式
此时显示的优先级是 red > blue > green。所以 my color 显示为红色。
特殊的计算方法
假设有下面这段代码：
CSS Code复制内容到剪贴板
<style type="text/css">
div p.classSelector {color: blue}
#idselector p {color: red}
</style>
<div id="idSelector">
<p class="classSelector">my color</p>
</div>
我们面对下面的 css，如何判断优先级呢？
CSS Code复制内容到剪贴板
<style type="text/css">
div p.classSelector {color: blue}
#idselector p {color: red}
</style>
这里介绍一种特殊的计算方法：
元素, 伪元素: 1 – (0,0,0,1)
类, 伪类, 属性: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
内联样式: 1 – (1,0,0,0)
这里的属性指的是：
效果如下：
优先级从上往下依次增加，至于如何计算，同样举例说明：
p: 1个元素– (0,0,0,1)
div: 1个元素 – (0,0,0,1)
#idSelector: 1个ID – (0,1,0,0)
div#idSelector: 1个元素, 1个ID – (0,1,0,1)
div#idSelector p: 2个元素, 1个ID– (0,1,0,2)
div#idSelector p.classSelector: 2个元素, 1个类, 1个ID – (0,1,1,2)
所以现在我们再来看上面的例子：
CSS Code复制内容到剪贴板
div p.classSelector {color: blue} – (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)
