CSS样式优先级（继承性、选择器优先级）

CSS的继承性

CSS的继承性指的是应用在一个标签上的那些CSS属性也会应用到字标签上。

<div>
	<p></p>
</div>

如果div有color:red属性，那么p也会继承color:red属性。

CSS优先规则1

——最近的祖先样式比其他祖先样式优先级高。

<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
	<div style="color: blue">
		<div class="son"></div>
	</div>
</div>

CSS优先规则2

——“直接样式”比“祖先样式”优先级高

<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
	<div class="son" style="color: blue">
	</div>
</div>

选择器的优先级

选择器类型

CSS的7种基础的选择器：

选择器	代码	示例代码	说明
通配选择器	*	*{}	选择所有元素
标签选择器	标签名称	a{}	根据标签选择元素
类选择器	.<类名>	.class{}	根据class的值选择元素
ID 选择器	#<id值>	#id{}	根据id的值选择元素
属性选择器	[<属性>]	a[href]	根据属性选择元素
伪类选择器	:<伪类>	a:hover{}	伪选择器不是直接对应HTML中定义 的元素，而是向选择器增加特殊的效果
伪元素选择器	::<伪元素>	a:before{}	同上

组合选择器：

选择器	代码	示例代码	说明
后代选择器	<选择器> , <选择器>	.father .child{}	先匹配第二个选择器的元素，并且属于第一个选择器内
子代选择器	<选择器> > <选择器>	.father>.child{}	先匹配第二个选择器的元素，并且为第一个选择器内元素的后代
兄弟选择器	<选择器> + <选择器>	.father+.child{}	匹配紧跟第一个选择器，并且匹配第二个选择器内的元素，如紧跟p元素后的a元素

CSS优先规则3

——优先级关系：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

<!-- html -->
<!-- black -->
<div class="content-class" id="content-id" style="color: black"></div> 
<!-- red -->
<div class="content-class" id="content-id"></div>  				
<!-- blue -->
<div class="content-class"></div>  					
<!-- grey -->
<div></div>  														

/* css */
#content-id {
	color: red;
}
.content-class {
	color: blue;
}
div {
	color: grey;
}

由规则3可知，4个div的color依次为black、red、blue、 grey。

CSS优先规则4

——按a、b、c的顺序依次比较大小，大的优先级高，相等则比较下一个。若a=b=c，则按“就近原则”来判断
( a ) 计算选择符中ID选择器的个数；
( b ) 计算选择符中类选择器、属性选择器以及伪类选择器的个数之和；
( c ) 计算选择符中标签选择器和伪元素选择器的个数之和。

<!-- html -->
<div id="con-id">
	<span class="con-span"></span>
</div>

/* css */
#con-id span {
	color: red;
}
div .con-span {
	color: blue;
}

由规则4可知，#con-id span 的a值比div .con-span大，所以span的color为red。

CSS优先规则5

——属性后插有!important的属性拥有最高优先级。若同时插有！important，则再利用规则3、4判断优先级。

<!-- html -->
<div id="con-id">
	<span class="con-span"></span>
</div>

/* css */
#con-id span {
	color: red;
}
div .con-span {
	color: blue !important;
}

根据规则4，#con-id span拥有更高权值，但选择器div .con-span中的background属性被插入了!important，所以p的background为red。

参考

菜鸟教程 · CSS 样式优先级