CSS 选择器：初学者指南

CSS 选择器的初学者指南

CSS 选择器是 CSS 的核心，它允许您选择 HTML 元素并对其应用样式。选择器分为多种类型，每种类型都有自己独特的用途。

1. 基本选择器

基本选择器是使用最广泛的，也是最容易理解的。基本选择器包括：

• 标签选择器 ：根据 HTML 标签名选择元素，例如：<p> 选择所有段落。
• 类选择器 ：根据元素的类属性选择元素，例如：.example 选择所有具有类名 “example” 的元素。
• ID 选择器 ：根据元素的 ID 属性选择元素，例如：#example 选择具有 ID “example” 的元素。

2. 组合选择器

组合选择器是将两个或多个基本选择器组合在一起使用，以更精确地选择元素。组合选择器包括：

• 后代选择器 ：选择位于另一个元素内部的元素，例如：p > a 选择所有位于 <p> 元素内部的 <a> 元素。
• 子元素选择器 ：选择作为另一个元素的直接子元素的元素，例如：p a 选择所有作为 <p> 元素的直接子元素的 <a> 元素。
• 相邻兄弟选择器 ：选择紧跟另一个元素之后的元素，例如：p + a 选择紧跟 <p> 元素之后的第一个 <a> 元素。
• 通用兄弟选择器 ：选择所有紧跟另一个元素之后的元素，例如：p ~ a 选择所有紧跟 <p> 元素之后的 <a> 元素。

3. 伪类选择器

伪类选择器是根据元素的状态或行为选择元素，例如：

• :hover 选择当鼠标悬停在元素上时该元素。
• :focus 选择当元素获得焦点时该元素。
• :active 选择当元素被激活时该元素。
• :visited 选择当元素被访问过时该元素。

4. 伪元素选择器

伪元素选择器是选择元素的一部分，例如：

• ::before 选择元素之前的内容。
• ::after 选择元素之后的内容。

5. 通配符选择器

通配符选择器是选择所有元素，例如：

• * 选择所有元素。

6. 实例

以下是一些 CSS 选择器的实例：

• p { color: red; } 将所有段落的文本颜色设置为红色。
• .example { background-color: blue; } 将所有具有类名 “example” 的元素的背景颜色设置为蓝色。
• #example { font-size: 20px; } 将具有 ID “example” 的元素的字体大小设置为 20 像素。
• p > a { color: green; } 将所有位于 <p> 元素内部的 <a> 元素的文本颜色设置为绿色。
• p a { color: yellow; } 将所有作为 <p> 元素的直接子元素的 <a> 元素的文本颜色设置为黄色。
• p + a { color: orange; } 将所有紧跟 <p> 元素之后的第一个 <a> 元素的文本颜色设置为橙色。
• p ~ a { color: purple; } 将所有紧跟 <p> 元素之后的 <a> 元素的文本颜色设置为紫色。
• a:hover { color: pink; } 将当鼠标悬停在 <a> 元素上时该元素的文本颜色设置为粉色。
• a:focus { color: lime; } 将当 <a> 元素获得焦点时该元素的文本颜色设置为绿色。
• a:active { color: black; } 将当 <a> 元素被激活时该元素的文本颜色设置为黑色。
• a:visited { color: gray; } 将当 <a> 元素被访问过时该元素的文本颜色设置为灰色。
• ::before { content: "Before"; } 在每个元素之前添加 “Before” 文本。
• ::after { content: "After"; } 在每个元素之后添加 “After” 文本。
• * { color: black; } 将所有元素的文本颜色设置为黑色。

总结

CSS 选择器是 CSS 的核心，它允许您选择 HTML 元素并对其应用样式。选择器分为多种类型，每种类型都有自己独特的用途。了解 CSS 选择器的种类和用法，可以帮助您在网页设计和前端开发中，灵活地定位和操作 HTML 元素，轻松实现页面样式的控制。