CSS样式优先级

来源：菜鸟教程

一、CSS的继承性

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

如果 <div> 有个属性 color: red，则这个属性将被 <p> 继承，即 <p> 也拥有属性 color: red。

CSS优先规则1：最近的祖先样式比其他祖先样式优先级高

CSS优先规则2：直接样式 (一个标签直接拥有的属性) 比祖先样式优先级高

二、优先级

1. 七种基础选择器

• ID选择器， #id{}
• 类选择器， .class{}
• 属性选择器， a[href=“segmentfault.com”]{}
• 伪类选择器， 如 :hover{}
• 伪元素选择器， 如 ::before{}
• 标签选择器， 如 span{}
• 通配选择器， 如 *{}

2. 三种连接样式

• 行内样式（内嵌样式） 写在标签内的style
• 内部样式（内联样式） 写在head部分
• 外部样式（外联样式） 外部导入

css样式优先级：行内样式（内嵌样式）>内部样式（内联样式）>外部样式（外联样式）

CSS优先规则2：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

3. 搭配使用

• 后代选择符： .father .child{}
• 子选择符： .father > .child{}
• 相邻选择符: .bro1 + .bro2{}

CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

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