知识篇 -- CSS选择器深度解析

CSS选择器是CSS规则的核心，它们定义了样式规则将作用于哪些HTML元素。掌握各种选择器能让你更精确、高效地控制页面元素的样式。本文将从基础选择器出发，逐步深入到更复杂的组合器、属性选择器、伪类和伪元素。

一、基础选择器：构建样式规则的基石

基础选择器是最常用、最直观的选择方式，它们直接指向HTML文档中的特定元素或元素集合。

1. 元素选择器 (Type Selector)

直接通过HTML标签名来选择所有该类型的元素。 示例：

<!-- HTML -->
<p>这是第一个段落。</p>
<span>这是一个span元素。</span>
<p>这是第二个段落。</p>

/* CSS */
p {
    color: #333; /* 所有p标签的文字颜色变为深灰色 */
    font-size: 16px;
}

特点： 简单直接，但缺乏针对性，会影响页面上所有同类型元素。

2. 类选择器 (Class Selector)

通过元素的 class 属性来选择。一个HTML元素可以拥有多个类名，多个元素也可以共享同一个类名。这是CSS中最灵活、最常用的选择器之一。 示例：

<!-- HTML -->
<div class="card">卡片内容</div>
<p class="text-center">居中文字</p>
<h2 class="card text-center">卡片标题，同时居中</h2>

/* CSS */
.card {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
}
.text-center {
    text-align: center;
}

特点： 高度可复用，便于模块化开发和样式管理。

3. ID 选择器 (ID Selector)

通过元素的 id 属性来选择。id 在一个HTML文档中必须是唯一的。 示例：

<!-- HTML -->
<button id="submit-button">提交</button>
<input type="text" id="username-input">

/* CSS */
#submit-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

特点： 唯一性决定了其不适合复用，特异性最高（仅次于 !important），常用于JavaScript操作或页面特定区域的样式。

4. 通用选择器 (Universal Selector)

用星号 * 表示，选择HTML文档中的所有元素。 示例：

/* CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 常用作全局样式重置 */
}

特点： 影响范围广，性能开销相对较大，应谨慎使用。

5. 群组选择器 (Group Selector)

用逗号 , 将多个选择器连接起来，为这些选择器指定的元素应用相同的样式。 示例：

/* CSS */
h1, h2, h3, .section-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2c3e50;
}

特点： 减少代码重复，提高CSS的可读性和维护性。

二、组合器：建立元素间的关系

组合器用于根据元素之间的关系（如父子、兄弟等）来选择元素，从而实现更复杂的选择逻辑。

1. 后代选择器 (Descendant Selector) - (空格)

选择作为另一个元素后代（可以是子元素、孙子元素或更深层级的后代）的元素。 示例：

<!-- HTML -->
<div class="article">
    <h2>文章标题</h2>
    <p>文章内容的第一段。</p>
    <footer>
        <p>版权信息。</p>
    </footer>
</div>

/* CSS */
.article p {
    line-height: 1.8; /* 仅影响 .article 内部的所有p标签 */
    margin-bottom: 1em;
}

特点： 匹配所有层级的后代元素，非常灵活。

2. 子选择器 (Child Selector) - >

选择作为另一个元素直接子元素的元素。 示例：

<!-- HTML -->
<ul class="menu">
    <li>菜单项 1</li>
    <li>菜单项 2
        <ul>
            <li>子菜单项 A</li>
        </ul>
    </li>
</ul>

/* CSS */
.menu > li {
    list-style: none; /* 只影响 .menu 的直接子li，不影响子菜单的li */
    padding: 5px 0;
}

特点： 精确匹配直接子元素，避免影响深层嵌套的同类型元素。

3. 相邻兄弟选择器 (Adjacent Sibling Selector) - +

选择紧接在另一个元素后面的第一个兄弟元素。这两个元素必须有相同的父元素。 示例：

<!-- HTML -->
<h3>小标题</h3>
<p>这是紧跟在小标题后的段落。</p>
<p>这是另一个段落。</p>

/* CSS */
h3 + p {
    margin-top: 0; /* 仅影响紧跟在h3后的第一个p标签 */
    font-style: italic;
}

特点： 仅选择紧邻的下一个兄弟元素。

4. 通用兄弟选择器 (General Sibling Selector) - ~

选择在另一个元素之后的所有兄弟元素。这两个元素必须有相同的父元素。 示例：

<!-- HTML -->
<div class="item-list">
    <span>第一个元素</span>
    <p>段落 A</p>
    <span>第二个元素</span>
    <p>段落 B</p>
    <p>段落 C</p>
</div>

/* CSS */
span ~ p {
    background-color: #f0f8ff; /* 影响所有在span元素之后的p兄弟元素 */
    border-left: 3px solid skyblue;
    padding-left: 10px;
}

特点： 影响所有后续的兄弟元素。

三、属性选择器：根据属性值筛选元素

属性选择器允许您根据HTML元素的属性及其值来选择元素，提供了更细粒度的控制。

1. [attribute]

选择具有特定属性的元素，无论其值是什么。 示例：

<!-- HTML -->
<a href="https://example.com">外部链接</a>
<input type="text" placeholder="请输入">
<button disabled>禁用按钮</button>

/* CSS */
a[href] {
    text-decoration: none; /* 所有带href属性的a标签取消下划线 */
}
[disabled] {
    opacity: 0.6; /* 所有带disabled属性的元素透明度降低 */
    cursor: not-allowed;
}

2. [attribute="value"]

选择具有特定属性且其值完全匹配指定字符串的元素。 示例：

<!-- HTML -->
<input type="text">
<input type="submit">
<input type="password">

/* CSS */
input[type="text"] {
    border: 1px solid blue; /* 仅影响type为text的input */
}

3. [attribute~="value"]

选择属性值中包含指定单词的元素。单词必须是独立的，由空格分隔。 示例：

<!-- HTML -->
<p class="message error">错误信息</p>
<p class="message warning">警告信息</p>
<p class="error-only">仅错误</p>

/* CSS */
p[class~="error"] {
    color: red; /* 匹配class中包含独立单词"error"的p标签 */
}

4. [attribute^="value"]

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

<!-- HTML -->
<a href="https://www.google.com">Google</a>
<a href="http://www.baidu.com">Baidu</a>

/* CSS */
a[href^="https"] {
    color: green; /* 匹配href以"https"开头的a标签 */
}

5. [attribute$="value"]

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

<!-- HTML -->
<img src="logo.png">
<img src="avatar.jpg">

/* CSS */
img[src$=".png"] {
    border: 2px solid blue; /* 匹配src以".png"结尾的img标签 */
}

6. [attribute*="value"]

选择属性值中包含指定字符串（可以是部分匹配）的元素。 示例：

<!-- HTML -->
<p data-custom="user-data-1">用户数据</p>
<p data-custom="product-info">产品信息</p>

/* CSS */
p[data-custom*="data"] {
    background-color: lightyellow; /* 匹配data-custom中包含"data"的p标签 */
}

四、伪类 (Pseudo-classes)：基于状态和结构的选择

伪类用于选择处于特定状态的元素，或者根据元素在文档树中的结构位置来选择。它们以单个冒号 : 开头。

1. 链接伪类 (Link Pseudo-classes)

用于样式化超链接的不同状态。

• :link: 未访问的链接。
• :visited: 已访问的链接。
• :hover: 鼠标悬停在元素上。
• :active: 元素被激活（例如点击时）。 示例：

/* CSS */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; text-decoration: underline; }
a:active { color: green; }

2. 用户界面伪类 (UI Pseudo-classes)

用于样式化表单元素的不同状态。

• :focus: 元素获得焦点（如输入框被点击或通过Tab键选中）。
• :enabled: 可用的表单元素。
• :disabled: 禁用的表单元素。
• :checked: 被选中的复选框或单选按钮。 示例：

/* CSS */
input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
input[type="checkbox"]:checked + label {
    font-weight: bold; /* 选中复选框后，其相邻的label文字加粗 */
}

3. 结构性伪类 (Structural Pseudo-classes)

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

• :first-child: 匹配父元素的第一个子元素。
• :last-child: 匹配父元素的最后一个子元素。
• :nth-child(n): 匹配父元素的第 n 个子元素。n 可以是数字、关键字（even, odd）或公式（An+B）。
  • li:nth-child(2): 第二个 li。
  • li:nth-child(odd): 奇数 li。
  • li:nth-child(2n+1): 奇数 li。
• :nth-last-child(n): 匹配父元素的倒数第 n 个子元素。
• :first-of-type: 匹配同类型兄弟元素中的第一个。
• :last-of-type: 匹配同类型兄弟元素中的最后一个。
• :nth-of-type(n): 匹配同类型兄弟元素中的第 n 个。
• :nth-last-of-type(n): 匹配同类型兄弟元素中的倒数第 n 个。
• :only-child: 匹配父元素中唯一的子元素。
• :only-of-type: 匹配父元素中唯一的同类型子元素。
• :empty: 匹配不包含任何子元素（包括文本节点）的元素。
• :root: 匹配文档的根元素（通常是 <html>）。 示例：

<!-- HTML -->
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

/* CSS */
li:first-child {
    color: green; /* 第一个列表项为绿色 */
}
li:nth-child(odd) {
    background-color: #f2f2f2; /* 奇数列表项有浅灰色背景 */
}

4. 其他伪类

• :not(selector): 匹配不符合指定选择器的元素。 示例：

  /* CSS */
  p:not(.highlight) {
      color: #555; /* 所有不是 .highlight 类的p标签文字颜色为深灰色 */
  }
  

• :target: 匹配当前 URL 的片段标识符所指向的元素。

五、伪元素 (Pseudo-elements)：操作元素的部分内容

伪元素用于选择元素的特定部分，或者在元素内容的前后插入内容。它们以双冒号 :: 开头（CSS2 使用单个冒号 :，但 :: 是推荐的，以区分伪类和伪元素）。

1. ::before 和 ::after

在元素内容之前或之后插入生成的内容。通常与 content 属性一起使用。 示例：

<!-- HTML -->
<p class="note">这是一条重要提示。</p>

/* CSS */
.note::before {
    content: "💡 "; /* 在提示前添加一个灯泡图标 */
    font-weight: bold;
    color: orange;
}
.note::after {
    content: " (完)"; /* 在提示后添加"(完)" */
    font-size: 0.8em;
    color: gray;
}

特点： 常用于添加装饰性内容、图标、清除浮动（clearfix 技巧）等。

2. ::first-line

选择元素的第一行文本。 示例：

/* CSS */
p::first-line {
    font-weight: bold;
    color: navy;
    font-variant: small-caps; /* 将第一行文本设置为小型大写字母 */
}

特点： 只能应用于块级元素。

3. ::first-letter

选择元素的第一个字母。 示例：

/* CSS */
p::first-letter {
    font-size: 2.5em;
    color: #c00;
    float: left; /* 实现首字下沉效果 */
    margin-right: 5px;
}

特点： 只能应用于块级元素。

4. ::selection

选择用户高亮（选中）的文本。 示例：

/* CSS */
::selection {
    background-color: #b3d4fc; /* 选中文字时的背景色 */
    color: #000; /* 选中文字时的文字颜色 */
}

特点： 兼容性可能存在差异，且可样式化的属性有限。

通过对这些选择器的深入理解和实践，你将能够更精准、更高效地控制网页的视觉呈现。