CSS选择器完全手册：精准控制网页样式的艺术

CSS选择器完全指南：从基础到高级应用

CSS选择器是前端开发中最基础也是最重要的概念之一，它决定了样式规则将应用于哪些HTML元素。本文将全面介绍CSS选择器的各种类型和使用方法，帮助您掌握精确控制页面样式的技巧。

一、CSS基础概念回顾

在深入探讨选择器之前，让我们先回顾几个CSS基础概念：

1. 声明(Declaration) ：一个属性与值的键值对，如color: red;
2. 声明块(Declaration Block) ：由大括号{}包围的一组声明
3. 选择器(Selector) ：指定样式规则将应用于哪些HTML元素
4. 规则集(Ruleset) ：选择器加上声明块的完整组合

css

/* 这是一个完整的规则集 */
h1 {
  color: blue;      /* 声明 */
  font-size: 24px;  /* 声明 */
}

二、基本选择器类型

2.1 元素选择器（类型选择器）

元素选择器直接使用HTML标签名来选择元素，是最简单的选择器类型。

css

/* 选择所有<p>元素 */
p {
  color: #333;
}

/* 选择所有<h1>元素 */
h1 {
  font-size: 2em;
}

2.2 类选择器

类选择器以点号(.)开头，选择具有特定class属性的元素。

html

<p class="warning">这是一条警告信息</p>

css

.warning {
  color: red;
  font-weight: bold;
}

一个元素可以有多个类，类名用空格分隔：

html

<p class="warning urgent">紧急警告！</p>

2.3 ID选择器

ID选择器以井号(#)开头，选择具有特定id属性的元素。ID在文档中应该是唯一的。

html

<div id="header">网站标题</div>

css

#header {
  background-color: #f0f0f0;
  padding: 20px;
}

2.4 通配选择器

通配选择器(*)匹配任何元素，常用于重置样式。

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

三、组合选择器

组合选择器可以将多个简单选择器组合在一起，实现更精确的选择。

3.1 后代选择器（空格）

选择某个元素内部的所有特定后代元素，不论嵌套层级。

css

/* 选择<div>内所有的<p> */
div p {
  line-height: 1.6;
}

3.2 子元素选择器（>）

只选择直接子元素，不选择更深层级的后代。

css

/* 只选择<ul>的直接<li>子元素 */
ul > li {
  list-style-type: square;
}

3.3 相邻兄弟选择器（+）

选择紧接在另一个元素后的兄弟元素，且二者有相同的父元素。

css

/* 选择紧跟在<h1>后的<p> */
h1 + p {
  margin-top: 0;
}

3.4 通用兄弟选择器（~）

选择某个元素之后的所有同级元素。

css

/* 选择<h1>之后的所有<p>兄弟元素 */
h1 ~ p {
  color: #666;
}

四、属性选择器

属性选择器根据元素的属性及属性值来选择元素。

4.1 基本属性选择器

css

/* 选择有title属性的元素 */
[title] {
  border-bottom: 1px dotted #999;
}

/* 选择type属性值为"text"的<input>元素 */
input[type="text"] {
  border: 1px solid #ccc;
}

4.2 属性值匹配选择器

css

/* 选择href属性以"https"开头的<a>元素 */
a[href^="https"] {
  color: green;
}

/* 选择src属性以".png"结尾的<img>元素 */
img[src$=".png"] {
  border: 2px solid blue;
}

/* 选择class属性包含"logo"的元素 */
[class*="logo"] {
  opacity: 0.8;
}

五、伪类选择器

伪类选择器用于定义元素的特殊状态。

5.1 链接相关伪类

css

/* 未访问的链接 */
a:link {
  color: blue;
}

/* 已访问的链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停状态 */
a:hover {
  color: red;
  text-decoration: underline;
}

/* 激活状态（鼠标按下未释放） */
a:active {
  color: green;
}

5.2 表单相关伪类

css

/* 获得焦点的输入框 */
input:focus {
  outline: 2px solid orange;
}

/* 被禁用的表单元素 */
input:disabled {
  background-color: #eee;
}

/* 被选中的复选框或单选按钮 */
input:checked {
  border-color: blue;
}

5.3 结构伪类

css

/* 选择第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 选择最后一个子元素 */
li:last-child {
  border-bottom: none;
}

/* 选择第3个子元素 */
li:nth-child(3) {
  color: red;
}

/* 选择奇数子元素 */
tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* 选择偶数子元素 */
tr:nth-child(even) {
  background-color: #fff;
}

/* 选择唯一的子元素 */
div:only-child {
  margin: 0 auto;
}

六、伪元素选择器

伪元素选择器用于选择元素的特定部分而不是元素本身。

6.1 ::before和::after

css

/* 在每个<p>前插入内容 */
p::before {
  content: "→ ";
  color: green;
}

/* 在每个<p>后插入内容 */
p::after {
  content: " ←";
  color: green;
}

6.2 ::first-letter和::first-line

css

/* 选择第一个字母 */
p::first-letter {
  font-size: 2em;
  float: left;
}

/* 选择第一行 */
p::first-line {
  font-weight: bold;
}

6.3 ::selection

css

/* 选择用户选中的文本 */
::selection {
  background-color: yellow;
  color: black;
}

七、选择器优先级与特异性

当多个选择器应用于同一个元素时，CSS有一套优先级规则决定哪个样式生效。

7.1 特异性计算规则

特异性由四个部分组成：[内联样式, ID选择器, 类/属性/伪类选择器, 元素/伪元素选择器]

• 内联样式：1,0,0,0
• ID选择器：0,1,0,0
• 类/属性/伪类选择器：0,0,1,0
• 元素/伪元素选择器：0,0,0,1

7.2 优先级示例

css

*               /* 0,0,0,0 - 最低 */
li              /* 0,0,0,1 */
ul li           /* 0,0,0,2 */
ul ol+li        /* 0,0,0,3 */
h1 + [rel=up]   /* 0,0,1,1 */
ul ol li.red    /* 0,0,1,3 */
li.red.level    /* 0,0,2,1 */
#header         /* 0,1,0,0 */
style=""        /* 1,0,0,0 - 最高 */

7.3 !important规则

!important可以覆盖所有其他规则，但应谨慎使用。

css

p {
  color: red !important;
}

八、实用选择器技巧

8.1 组合使用选择器

css

/* 选择class为"btn"且disabled的按钮 */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 选择表格中除了第一行外的所有奇数行 */
tr:not(:first-child):nth-child(odd) {
  background-color: #f5f5f5;
}

8.2 选择空元素

css

/* 选择内容为空的<div> */
div:empty {
  display: none;
}

8.3 选择特定语言的元素

html

<p lang="en">Hello!</p>
<p lang="fr">Bonjour!</p>

css

/* 选择法语内容 */
p:lang(fr) {
  font-style: italic;
}

九、现代CSS选择器新特性

9.1 :is()和:where()伪类

css

/* 传统写法 */
header h1, 
header h2, 
header h3 {
  margin-bottom: 0;
}

/* 使用:is()简化 */
header :is(h1, h2, h3) {
  margin-bottom: 0;
}

/* :where()特异性总是0 */
:where(header) h1 {
  margin-bottom: 0;  /* 特异性=0,0,0,1 */
}

9.2 :has()伪类（父选择器）

css

/* 选择包含<img>的<a> */
a:has(img) {
  border: 1px solid #ccc;
}

/* 选择包含至少一个<li>的<ul> */
ul:has(> li) {
  padding-left: 20px;
}

9.3 焦点相关伪类

css

/* 任何获得焦点的元素 */
:focus {
  outline: 2px solid blue;
}

/* 当浏览器认为元素应该显示焦点状态时 */
:focus-visible {
  outline: 2px dashed green;
}

/* 当元素及其后代获得焦点时 */
:focus-within {
  background-color: #f0f8ff;
}

十、选择器最佳实践

1. 保持简洁：避免过于复杂的选择器
2. 避免过度使用ID选择器：特异性太高难以覆盖
3. 合理使用类选择器：可复用性高
4. 注意性能：浏览器从右向左解析选择器
5. 使用有意义的命名 ：如.btn-primary而非.blue-btn

css

/* 不推荐 - 过于具体 */
div#main-content ul.nav li a.active {
  color: red;
}

/* 推荐 - 更简洁 */
.nav-link.active {
  color: red;
}

结语

CSS选择器是前端开发中的强大工具，掌握各种选择器的使用方法可以让你更精确地控制页面样式。从简单的基础选择器到复杂的组合选择器，再到现代的伪类选择器，合理运用这些工具可以大幅提高你的开发效率和样式控制能力。

记住，好的CSS不仅仅是让页面看起来漂亮，还要考虑可维护性、性能和可访问性。选择器的合理使用是实现这些目标的关键之一。