CSS 选择器速查表

在网页设计与前端开发领域，CSS 选择器是至关重要的工具，它能精准地选中 HTML 元素，然后为其应用样式，塑造出丰富多彩的网页界面。下面为大家带来一份实用的 CSS 选择器速查表，助力开发工作更加高效。

元素选择器

这是最为基础的选择器，直接通过 HTML 元素名称来选中元素。例如，要为所有的 <p> 元素设置样式，只需在 CSS 中写下 p { color: blue; }，这样页面上所有段落的文字都会变成蓝色。

类选择器

使用 . 加上自定义的类名来选择元素。在 HTML 中，给元素添加 class 属性，如 <div class="highlight">。在 CSS 里，通过 .highlight { background-color: yellow; }，就能让具有 highlight 类的元素背景变为黄色。它可用于为一组元素定义相同的样式，增强了样式的复用性。

ID 选择器

以 # 开头加上唯一的 ID 名来选择特定元素。HTML 中 <span id="unique-id">，CSS 中 #unique-id { font-weight: bold; }，由于 ID 在页面中必须唯一，所以这个选择器能精准定位到特定元素并应用样式。

属性选择器

可根据元素的属性来选择。比如，[type="text"] 能选中所有 type 属性为 text 的表单元素，可用于统一设置输入框样式，[type="text"] { border: 1px solid gray; }。

组合选择器

1. 后代选择器：用空格分隔，如 div p，表示选择 <div> 元素内部所有的 <p> 元素，可用于设置特定区域内的段落样式。
2. 子选择器：使用 >，ul > li 只选中 <ul> 元素的直接子元素 <li>。

伪类选择器

用于选择处于特定状态的元素。例如，:hover 能让鼠标悬停在元素上时改变样式，a:hover { color: red; } 使链接在鼠标悬停时变红；:active 针对元素被激活（如按钮按下）的状态。

伪元素选择器

用于选中元素的特定部分。::before 和 ::after 可在元素内容前后添加额外内容并设置样式，p::before { content: ">>"; } 会在每个段落前添加 “>>”。

这份 CSS 选择器速查表涵盖了常用的选择器类型，掌握它们能让开发者更灵活、高效地控制网页样式，打造出令人满意的页面效果。