css中选择器优先级

CSS 中选择器的优先级非常重要，因为它决定着哪些样式会被应用于 HTML 元素。选择器的优先级可以根据下面这个公式计算：

行内样式 > ID 选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器

css中选择器优先级

这意味着如果存在多个选择器可以应用于同一个元素，将会按照这个顺序来确定哪个样式更具优先级。

首先，行内样式（即内部样式）最具优先级，因为它们在 HTML 标记中直接定义，按照内部样式表的顺序来确定优先级。

<div style="color:red">red</div> <!-- 这个 div 的文本颜色为红色 -->

接下来，ID 选择器具有更高的优先级，因为 ID 是唯一的，在 HTML 中不能重复。所以，如果存在一个元素同时适用于一个 ID 选择器和一个类选择器，则 ID 选择器的样式将更优先。

<div id="example" class="container">This is an example</div>

#example {
  color: red;
}

.container {
  font-size: 12px;
}

在上面的代码块中， #example 的文本颜色将是红色，因为 ID 选择器的优先级更高。

如果一个元素同时适用于多个类选择器或属性选择器，则使用最后一个选择器定义的样式。

<div class="container Box">This is an example</div>

.container {
  font-size: 12px;
}

.Box {
  color: blue;
}

在上面的代码块中， .Box 的文本颜色将是蓝色，因为它是最后一个定义的选择器。

最后，元素选择器和伪元素选择器采用了最低的优先级。

p {
  color: green;
}

p::before {
  content: "Prefix";
}

在上面的代码块中，域注入的所有段落将是绿色的，而 ::before 中的内容将添加到每个段落之前，不论段落的 CSS 类型如何。