CSS的选择器优先级的详细场景说明及案例

CSS选择器的优先级是指在样式冲突时，浏览器根据一定规则确定哪个样式会被应用于特定的元素。CSS选择器的优先级由四个部分组成：行内样式（Inline Styles）、ID选择器、类选择器和元素选择器。以下是它们的详细场景说明及案例：

1. 行内样式（Inline Styles）

行内样式是直接应用于HTML元素的style属性的样式，其优先级最高。

<p style="color: red;">这是红色文本。</p>

2. ID选择器

ID选择器通过#符号表示，是对HTML元素的唯一标识进行样式设置，优先级次于行内样式。

#myElement {
  color: blue;
}

<div id="myElement">这是蓝色文本。</div>

3. 类选择器

类选择器通过.符号表示，用于选择具有相同类名的元素，优先级次于ID选择器。

.myClass {
  font-size: 16px;
}

<p class="myClass">这是16像素的文本。</p>

4. 元素选择器

元素选择器选择HTML元素的类型，是最低优先级的选择器。

p {
  font-family: 'Arial', sans-serif;
}

<p>这是使用Arial字体的文本。</p>

优先级计算规则：

• 行内样式（1000）
• ID选择器（100）
• 类选择器、属性选择器、伪类选择器（10）
• 元素选择器（1）

在计算优先级时，每个选择器的值相加，得到的结果越高，优先级越高。如果两个规则的优先级相同，后定义的规则将覆盖先定义的规则。

示例：

/* ID选择器的优先级为100 */
#myElement {
  color: green;
}

/* 类选择器的优先级为10 */
.myClass {
  color: blue;
}

/* 元素选择器的优先级为1 */
p {
  color: red;
}

<div id="myElement" class="myClass">
  这是绿色文本，因为ID选择器的优先级更高。
</div>

在这个例子中，尽管元素选择器和类选择器都设置了颜色，但由于ID选择器的优先级更高，最终文本颜色将是绿色。

本文链接：https://www.weguiding.com/css/962.html