1.4 选择器与优先级
1.4 选择器与优先级
CSS 选择器用于指定应用样式的 HTML 元素，而优先级（又称层叠性）决定了当多个规则应用于同一元素时，哪一条样式规则最终生效。了解 CSS 选择器和优先级规则是前端开发中非常重要的基础，能够帮助开发者精确地控制页面样式的应用。
1.4.1 CSS 选择器
选择器用于选中网页中的 HTML 元素，并为它们应用样式。常见的 CSS 选择器有以下几种：
1.4.1.1 元素选择器（Type Selector）
元素选择器直接选择某一 HTML 元素。例如，选择所有 <h1> 标签并设置其样式：
h1 {
color: blue;
font-size: 32px;
}
1.4.1.2 类选择器（Class Selector）
类选择器通过类名选择一组元素。使用点 (.) 符号表示类名。一个元素可以拥有多个类名，这样同一个类选择器就可以为多个元素设置样式。
.highlight {
background-color: yellow;
}
<p class="highlight">这段文本有黄色背景。</p>
1.4.1.3 ID 选择器（ID Selector）
ID 选择器通过元素的 id 属性选择唯一的元素。使用井号 (#) 符号表示 ID。每个 HTML 文档中的 ID 必须唯一。
#header {
background-color: lightgray;
text-align: center;
}
<div id="header">这是页面的标题区域</div>
1.4.1.4 后代选择器（Descendant Selector）
后代选择器用于选中某个元素内的所有指定子元素。选择器由多个元素名称组成，之间用空格隔开。
div p {
color: green;
}
此规则选择 div 元素内部的所有 p 元素，将它们的文本颜色设置为绿色。
1.4.1.5 子元素选择器（Child Selector）
子元素选择器用于选择某个元素的直接子元素，选择器由 > 符号连接。
div > p {
color: blue;
}
此规则选择所有直接位于 div 元素内的 p 元素，而不会影响嵌套较深的 p 元素。
1.4.1.6 伪类选择器（Pseudo-class Selector）
伪类选择器用于选择元素的特殊状态。例如，hover 伪类用于选择鼠标悬停在元素上的状态。
a:hover {
color: red;
}
此规则将在鼠标悬停在链接上时，将其颜色改为红色。
常见的伪类包括：
:hover— 鼠标悬停:focus— 获得焦点:nth-child()— 选择父元素中的第 N 个子元素
1.4.1.7 伪元素选择器（Pseudo-element Selector）
伪元素选择器用于选中元素的特定部分，或添加额外的内容。常用的伪元素有 ::before 和 ::after。
p::before {
content: "注意：";
font-weight: bold;
}
此规则会在每个 p 元素的前面插入 "注意：" 字符串。
常见的伪元素包括：
::before— 在元素内容前插入内容::after— 在元素内容后插入内容::first-letter— 选中元素的首字母
1.4.1.8 属性选择器（Attribute Selector）
属性选择器允许你通过元素的属性值来选择元素。属性选择器包括对元素的属性进行精确匹配、部分匹配、存在检查等。
input[type="text"] {
border: 1px solid #ccc;
}
此规则选择所有 type 为 "text" 的 input 元素，并为它们设置边框。
1.4.2 CSS 优先级（Specificity）
在 CSS 中，多个样式规则可能会应用到同一元素。当有多个冲突的样式时，优先级规则决定了最终哪个样式会生效。优先级由选择器的类型和具体性（specificity）决定，越具体的选择器优先级越高。
1.4.2.1 计算优先级
CSS 的优先级计算遵循以下规则：
- 内联样式（Inline styles）：直接在元素的
style属性中定义的样式，优先级最高。 - ID 选择器：每个 ID 选择器的优先级较高。
- 类选择器、属性选择器和伪类：这些选择器的优先级相对较低。
- 元素选择器和伪元素：这些选择器的优先级最低。
优先级的计算方式是基于四个值（a, b, c, d）：
- a：内联样式数量（如果存在）。
- b：ID 选择器的数量。
- c：类选择器、属性选择器和伪类的数量。
- d：元素选择器和伪元素的数量。
例如，以下四个选择器的优先级是：
#header {}→ (0, 1, 0, 0).highlight {}→ (0, 0, 1, 0)div p {}→ (0, 0, 0, 2)h1 {}→ (0, 0, 0, 1)
1.4.2.2 优先级例子
假设有以下 HTML 和 CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 优先级示例</title>
<style>
p {
color: green;
}
.highlight {
color: yellow;
}
#main {
color: red;
}
</style>
</head>
<body>
<p class="highlight" id="main">这是一个测试段落。</p>
</body>
</html>
p元素的颜色为绿色。.highlight类将颜色设置为黄色。#mainID 选择器将颜色设置为红色。
由于 ID 选择器具有最高的优先级，#main 的红色会覆盖其他选择器，因此最终段落的颜色是 红色。
1.4.3 !important 规则
使用 !important 可以强制某个样式规则具有更高的优先级，忽略其他规则的优先级。
p {
color: green !important;
}
如果多个规则同时应用 !important，则优先级由选择器的具体性决定。
注意： !important 是一个强制性的规则，通常不推荐过多使用，因为它会使得样式优先级的管理变得困难，影响代码的可维护性。
总结
- 选择器 是 CSS 中用来选择 HTML 元素并为其应用样式的工具，常见的选择器包括元素选择器、类选择器、ID 选择器、伪类和伪元素选择器等。
- 优先级 确定了当多个规则应用于同一元素时，哪个规则会生效。优先级由选择器的类型和具体性计算得出。
- 使用
!important可以强制某个样式具有更高的优先级，但应谨慎使用，以避免影响代码的可维护性。
理解选择器和优先级的基本概念，可以帮助开发者更有效地管理和控制网页样式。