CSS选择器样式优先级

时间: 2024-10-20 15:27:21

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

在 CSS 中，选择器的优先级（或称特定性）决定了在多个选择器针对同一元素时，哪个样式将被应用。优先级由以下几个部分组成，按照优先级从高到低排列：

优先级计算规则

1. 内联样式（Inline styles）：样式直接在 HTML 元素上定义，优先级最高。

html
   <div style="color: red;">This text is red.</div>
   

2. ID选择器：以 # 开头的选择器。例如：

css
   #header {
       color: blue;
   }
   

3. 类选择器、伪类选择器、和属性选择器：包括以 . 开头的类选择器、以 : 开头的伪类选择器以及以 [] 表示的属性选择器。例如：

css
   .class {
       color: green;
   }
   a:hover {
       color: orange;
   }
   [type="text"] {
       border: 1px solid black;
   }
   

4. 类型选择器（元素选择器）：直接选择元素的名称，例如 div 或 h1。优先级最低。

css
   div {
       color: black;
   }
   

5. 通配符选择器（Universal selector）*：选择所有元素，优先级低于类型选择器。

css
   * {
       margin: 0;
   }
   

优先级计算示例

例如，假设我们有如下 CSS 规则和 HTML 代码：

html
<div id="myDiv" class="content" style="color: red;">Hello World</div>

css
#myDiv {
    color: blue;
}

.content {
    color: green;
}

div {
    color: black;
}

在这个例子中，优先级计算如下：

- 内联样式：style 有最高优先级，颜色为 red。

- ID选择器：选择器 #myDiv 具有优先级 100（1 个 ID 选择器），颜色为 blue。

- 类选择器：选择器 .content 具有优先级 10（1 个类选择器），颜色为 green。

- 类型选择器：div 具有优先级 1，颜色为 black。

最终结果为 red，因为内联样式优先级最高，不受其他样式的影响。

优先级计算规则总结

在 CSS 中，优先级的计算是基于以下分数（从高到低）：

重要注意事项

- 优先级相同的冲突：如果多个选择器的优先级相同，则后定义的样式将优先应用。

- 结合使用：组合选择器的优先级计算是将所有选择器的优先级相加，例如 .class1 .class2 的优先级为 20。

- 重要性规则（!important）：使用 !important 可以提升某个样式的优先级，在所有其他规则之上应用，尽量少用，以保持代码可维护性。

了解 CSS 选择器的优先级是非常重要的，它可以帮助你更有效地管理样式，并确保你希望的样式得到正确应用。