引言

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

---

1. 基本选择器

1.1 元素选择器（Type Selector）

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

语法

css">element {/* 样式规则 */
}

示例

css">p {color: blue;
}

1.2 类选择器（Class Selector）

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

语法

css">.className {/* 样式规则 */
}

示例

css">.highlight {background-color: yellow;
}

1.3 ID 选择器（ID Selector）

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

语法

css">#idName {/* 样式规则 */
}

示例

css">#header {font-size: 24px;
}

1.4 通配符选择器（Universal Selector）

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

语法

css">* {/* 样式规则 */
}

示例

css">* {margin: 0;padding: 0;
}

---

2. 组合选择器

2.1 后代选择器（Descendant Selector）

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

语法

css">ancestor descendant {/* 样式规则 */
}

示例

css">div p {color: red;
}

2.2 子元素选择器（Child Selector）

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

语法

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

示例

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

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

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

语法

css">element + sibling {/* 样式规则 */
}

示例

css">h1 + p {font-weight: bold;
}

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

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

语法

css">element ~ sibling {/* 样式规则 */
}

示例

css">h1 ~ p {color: green;
}

---

3. 属性选择器

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

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

语法

css">[attribute] {/* 样式规则 */
}

示例

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

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

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

语法

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

示例

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

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

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

语法

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

示例

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

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

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

语法

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

示例

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

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

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

语法

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

示例

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

---

4. 伪类选择器

4.1 动态伪类（Dynamic Pseudo-classes）

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

示例

css">a:hover {color: red;
}input:focus {border-color: blue;
}

4.2 结构伪类（Structural Pseudo-classes）

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

示例

css">li:first-child {font-weight: bold;
}li:nth-child(2n) {background-color: lightgray;
}

4.3 否定伪类（Negation Pseudo-class）

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

语法

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

示例

css">:not(.highlight) {opacity: 0.5;
}

---

5. 伪元素选择器

5.1 ::before 和 ::after

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

示例

css">p::before {content: "Note: ";font-weight: bold;
}p::after {content: " (End)";color: gray;
}

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

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

示例

css">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

---

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