以下优先级依次递增：
1. 类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）
2. 类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type="radio"]），伪类（pseudo-classes）（例如, :hover）
3. ID选择器（例如, #example）
通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ' ') 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。
给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。
例外的!important规则
当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其他声明。虽然技术上!important与优先级无关，但效果上它直接相关。
Demo：
<style>
#gender_male,#gender_female{
background-color:green;
}
.gender_male{
background-color:red;
}
input{
background-color:blue;
}
</style>
</head>
<body>
<input type="radio" id="gender_male" name="male" class="gender_male" checked>
<label for="gender_male">男</label>
<input type="radio" id="gender_female" class="gender_female" name="male">
<label for="gender_female">女</label>
</body>
页面只有id选择器生效。因为其他选择器优先级没有id选择器高，效果被覆盖。
CSS priority
复杂场景
- 行内样式
<div style="xxx"></div>==> a - id选择器 ==> b
- 类选择器 ==> c
- 标签选择器、伪元素 ==> d
demo
*{} /* a=0 b=0 c=0 d=0 -> 0,0,0,0 */
p{} /* a=0 b=0 c=0 d=0 -> 0,0,0,1 */
a:hover{} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul li{} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li /* a=0 b=0 c=0 d=3 -> 0,0,03 */
h1+input[type=hidden]{} /* a=0 b=0 c=1 d=2 ->0,0,1,1 */
ul ol li.active{} /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p{} /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
/* style="xx" /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */
了解更多信息，访问：
CSS priority
网友评论