CSS（层叠样式表）是用于定义网页上元素样式和布局的重要技术。在 CSS 中，选择器是一种用于选择要应用样式的 HTML 元素的模式。选择器是 CSS 的核心组成部分，掌握不同类型的选择器对于创建精美的网页设计至关重要。本文将从基础到高级介绍 CSS 选择器，以帮助您更好地理解如何选择和样式化 HTML 元素。

1. 基础选择器

1.1 元素选择器

元素选择器是最基本的选择器，通过指定 HTML 元素的标签名称来选择元素。

css 复制代码

p {
  color: blue;
}

上述示例中的样式将应用于所有 <p> 标签。

1.2 类选择器

类选择器通过给 HTML 元素添加 class 属性，然后通过 . 后跟类名来选择元素。

css 复制代码

.button {
  background-color: #ff6600;
}

html 复制代码

<button class="button">Click me</button>

类选择器允许您为多个元素应用相同的样式。

1.3 ID 选择器

ID 选择器通过给 HTML 元素添加 id 属性，然后通过 # 后跟 ID 来选择元素。

css 复制代码

#header {
  font-size: 24px;
}

html 复制代码

<div id="header">Page Header</div>

每个页面只能有一个相同的 ID，因此 ID 选择器用于唯一标识元素。

2. 层次选择器

层次选择器允许您选择特定层次结构中的元素。

2.1 后代选择器

后代选择器通过空格分隔的选择器，选择某个元素下的所有后代元素。

css 复制代码

.container p {
  margin: 10px;
}

上述示例中的样式将应用于所有在类名为 "container" 的元素内部的 <p> 标签。

2.2 子元素选择器

子元素选择器通过 > 分隔的选择器，选择某个元素的直接子元素。

css 复制代码

ul > li {
  list-style-type: square;
}

上述示例中的样式将仅应用于 <ul> 元素下的直接子元素 <li>。

2.3 相邻兄弟选择器

相邻兄弟选择器通过 + 分隔的选择器，选择与指定元素在同一级的下一个兄弟元素。

css 复制代码

h2 + p {
  font-weight: bold;
}

上述示例中的样式将应用于紧跟在 <h2> 元素后的 <p> 元素。

3. 属性选择器

属性选择器允许您选择具有特定属性或属性值的元素。

3.1 属性存在选择器

属性存在选择器通过使用方括号 []，选择具有指定属性的元素。

css 复制代码

input[type="text"] {
  border: 1px solid #ccc;
}

上述示例中的样式将应用于所有 type 属性为 "text" 的 <input> 元素。

3.2 属性值选择器

属性值选择器通过使用方括号 [] 和 =，选择具有特定属性值的元素。

css 复制代码

a[href="https://www.example.com"] {
  color: green;
}

上述示例中的样式将应用于 href 属性值为 "www.example.com" 的 <a> 元素。

4. 伪类和伪元素选择器

伪类和伪元素选择器允许您选择元素的特殊状态或位置。

4.1 伪类选择器

伪类选择器以 : 开头，选择元素的特殊状态，例如 :hover 用于鼠标悬停状态。

css 复制代码

a:hover {
  text-decoration: underline;
}

4.2 伪元素选择器

伪元素选择器以 :: 开头，选择元素的特殊部分，例如 ::before 用于在元素前插入内容。

css 复制代码

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

5. 复合选择器

复合选择器允许将多个选择器组合在一起以选择更复杂的元素。

css 复制代码

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

上述示例中的样式将应用于 <h1>, <h2>, 和 <h3> 元素。

6. 通配符选择器

通配符选择器 * 用于选择页面上的所有元素。

css 复制代码

* {
  margin: 0;
  padding: 0;
}

这将重置所有元素的内边距和外边距。

选择器的优先级

在 CSS 中，选择器的优先级决定了哪些样式规则将应用于特定的元素，当多个规则应用于同一元素时，优先级越高的规则将胜出。CSS 选择器的优先级通常按以下规则计算：

内联样式 ：直接应用于 HTML 元素的 style 属性的样式拥有最高的优先级。例如：
html 复制代码
```
<p style="color: red;">这是一段红色文本。</p>
```
ID 选择器：通过 ID 选择器选择的元素拥有较高的优先级。例如：
css 复制代码
```
#header {
  background-color: blue;
}
```
html 复制代码
```
<div id="header">页面标题</div>
```

类选择器、属性选择器和伪类：这些选择器通常具有中等优先级，它们用于选择多个元素。

css 复制代码

.button {
  background-color: green;
}

a[href="https://www.example.com"] {
  color: blue;
}

p:hover {
  text-decoration: underline;
}

元素选择器和伪元素选择器：元素选择器选择特定的 HTML 元素，而伪元素选择器选择元素的特殊部分。
css 复制代码
```
h1 {
  font-family: "Arial", sans-serif;
}

p::before {
  content: "注意：";
}
```
通配符选择器和继承的样式 ：通配符选择器 * 和继承的样式通常拥有最低的优先级。通配符选择器选择所有元素，而继承的样式是从父元素继承的样式。

CSS 优先级的计算是基于每个规则中选择器的特点。如果多个规则应用于同一元素，浏览器将根据选择器的优先级来决定应用哪个规则的样式。如果两个规则具有相同的优先级，那么最后定义的规则将胜出，这被称为"层叠"。

结语

CSS 选择器是创建精美网页设计的关键工具。本文涵盖了从基础选择器到层次选择器、属性选择器、伪类和伪元素选择器的多个方面。熟练掌握这些选择器将使您能够更精确地选择和样式化网页元素，从而实现所需的外观和布局。

探究 CSS 选择器：从基础到高级

1. 基础选择器

1.1 元素选择器

1.2 类选择器

1.3 ID 选择器

2. 层次选择器

2.1 后代选择器

2.2 子元素选择器

2.3 相邻兄弟选择器

3. 属性选择器

3.1 属性存在选择器

3.2 属性值选择器

4. 伪类和伪元素选择器

4.1 伪类选择器

4.2 伪元素选择器

5. 复合选择器

6. 通配符选择器

选择器的优先级

结语