面试题：CSS 中类选择器与 ID 选择器在样式优先级上的区别

Question

请阐述在 CSS 中，类选择器和 ID 选择器在样式优先级计算方面有什么不同，并举例说明当两者对同一元素应用冲突样式时，最终会显示哪种样式。

Answer 1

类选择器和 ID 选择器样式优先级计算的不同

1. 类选择器：在 CSS 优先级计算中，类选择器的权重为 0,1,0 。多个类选择器会进行权重叠加，例如两个类选择器同时应用到一个元素，权重变为 0,2,0 。
2. ID 选择器：ID 选择器的权重比类选择器更高，其权重为 1,0,0 。

冲突样式示例及最终显示样式

假设 HTML 结构如下：

<div id="myDiv" class="myClass">示例文本</div>

CSS 样式如下：

.myClass {
    color: red;
}
#myDiv {
    color: blue;
}

由于 ID 选择器权重（1,0,0）高于类选择器权重（0,1,0），所以 div 中的文本最终会显示为蓝色。即当类选择器和 ID 选择器对同一元素应用冲突样式时，ID 选择器定义的样式会生效。