CSS 选择器详解：类型、用法与示例

引言

CSS 选择器是用于选择 HTML 元素并为其应用样式的重要工具。掌握各种 CSS 选择器的用法，可以帮助开发者更高效地编写样式代码。本文将详细介绍 CSS 中的各种选择器，包括基本选择器、组合选择器、伪类选择器和伪元素选择器，并通过代码示例帮助读者深入理解。

---

1. 基本选择器

1.1 元素选择器（Type Selector）

元素选择器根据 HTML 元素的标签名选择元素。

语法

element {
  /* 样式规则 */
}

示例

p {
  color: blue;
}

1.2 类选择器（Class Selector）

类选择器根据元素的 class 属性选择元素。

语法

.className {
  /* 样式规则 */
}

示例

.highlight {
  background-color: yellow;
}

1.3 ID 选择器（ID Selector）

ID 选择器根据元素的 id 属性选择元素。

语法

#idName {
  /* 样式规则 */
}

示例

#header {
  font-size: 24px;
}

1.4 通配符选择器（Universal Selector）

通配符选择器选择所有元素。

语法

* {
  /* 样式规则 */
}

示例

* {
  margin: 0;
  padding: 0;
}

---

2. 组合选择器

2.1 后代选择器（Descendant Selector）

后代选择器选择某个元素的后代元素。

语法

ancestor descendant {
  /* 样式规则 */
}

示例

div p {
  color: red;
}

2.2 子元素选择器（Child Selector）

子元素选择器选择某个元素的直接子元素。

语法

parent > child {
  /* 样式规则 */
}

示例

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

2.3 相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器选择某个元素的下一个兄弟元素。

语法

element + sibling {
  /* 样式规则 */
}

示例

h1 + p {
  font-weight: bold;
}

2.4 通用兄弟选择器（General Sibling Selector）

通用兄弟选择器选择某个元素的所有兄弟元素。

语法

element ~ sibling {
  /* 样式规则 */
}

示例

h1 ~ p {
  color: green;
}

---

3. 属性选择器

3.1 属性存在选择器（Attribute Presence Selector）

选择具有指定属性的元素。

语法

[attribute] {
  /* 样式规则 */
}

示例

[target] {
  border: 1px solid black;
}

3.2 属性值选择器（Attribute Value Selector）

选择具有指定属性值的元素。

语法

[attribute="value"] {
  /* 样式规则 */
}

示例

[type="text"] {
  background-color: yellow;
}

3.3 属性值前缀选择器（Attribute Prefix Selector）

选择属性值以指定字符串开头的元素。

语法

[attribute^="value"] {
  /* 样式规则 */
}

示例

[href^="https"] {
  color: green;
}

3.4 属性值后缀选择器（Attribute Suffix Selector）

选择属性值以指定字符串结尾的元素。

语法

[attribute$="value"] {
  /* 样式规则 */
}

示例

[src$=".png"] {
  border: 2px solid blue;
}

3.5 属性值包含选择器（Attribute Substring Selector）

选择属性值包含指定字符串的元素。

语法

[attribute*="value"] {
  /* 样式规则 */
}

示例

[class*="btn"] {
  background-color: orange;
}

---

4. 伪类选择器

4.1 动态伪类（Dynamic Pseudo-classes）

根据用户交互状态选择元素。

示例

a:hover {
  color: red;
}

input:focus {
  border-color: blue;
}

4.2 结构伪类（Structural Pseudo-classes）

根据元素在文档中的位置选择元素。

示例

li:first-child {
  font-weight: bold;
}

li:nth-child(2n) {
  background-color: lightgray;
}

4.3 否定伪类（Negation Pseudo-class）

选择不匹配指定选择器的元素。

语法

:not(selector) {
  /* 样式规则 */
}

示例

:not(.highlight) {
  opacity: 0.5;
}

---

5. 伪元素选择器

5.1 ::before 和 ::after

在元素内容的前面或后面插入内容。

示例

p::before {
  content: "Note: ";
  font-weight: bold;
}

p::after {
  content: " (End)";
  color: gray;
}

5.2 ::first-line 和 ::first-letter

选择元素的第一行或第一个字母。

示例

p::first-line {
  font-size: 1.2em;
}

p::first-letter {
  font-size: 2em;
  color: red;
}

---

6. 总结

CSS 选择器是控制网页样式的重要工具。本文详细介绍了基本选择器、组合选择器、属性选择器、伪类选择器和伪元素选择器，并通过代码示例展示了它们的用法。掌握这些选择器，可以帮助开发者更高效地编写样式代码，实现复杂的布局和效果。

---

参考资料

1. MDN Web Docs: CSS Selectors
2. W3Schools: CSS Selectors
3. CSS: The Definitive Guide

---

注意：本文中的代码示例仅供参考，实际应用中可能需要根据具体需求进行调整和优化。