关于 css 优先级

一种思路

曾经有一种计算权重的方法，是将 id 的权值设为 100，class 权值设为 10，dom 元素的权值设为 1……

但这种思路不见的严谨，可以看下面这个例子：

#j {
	color: red;
}

.a .b .c .d .e .f .g .h .i .j {
	color: green;
}

<div class="a">
	<div class="b">
		<div class="c">
			<div class="d">
				<div class="e">
					<div class="f">
						<div class="g">
							<div class="h">
								<div class="i">
									<div id="j" class="j">
										yanceyleo
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

按上面那种说法，两个 css 的权值都是 100，但实际上最后颜色显示为红色。

一个靠谱的方法

• 元素/伪元素: (0,0,0,1)

• 类/伪类/属性: (0,0,1,0)

• ID: (0,1,0,0)

• 内联样式: (1,0,0,0)

这个方法从左到右，逐位比较。

回到一开始那个例子：

当使用 id 时，它的坐标是(0,1,0,0)

当使用 class 时，它的坐标是(0,0,10,0)

因为是从左到右，逐位比较，所以到了第二位，使用 class 的那个就被 pass 掉了，所以文字显示红色也就一目了然了。

有用的总结

• !important 最大，哪怕她的优先级不及其他的写法；

• 如果根据上面的计算法则，仍然权重相同，那后声明的覆盖先声明的；

• 要考虑到继承的样式

• 外部样式 < 内部样式 < 内联样式