CSS 选择器完全指南：从基础到高级的全面解析

CSS 选择器是样式表的核心组成部分，它决定了样式规则应用到哪些 HTML 元素上。掌握各种选择器的用法，能够让你更精准、更高效地编写 CSS 代码。本文将从基础到高级，全面解析 CSS 选择器的使用方法和应用场景。

一、基础选择器

基础选择器是 CSS 中最常用、最简单的选择器，它们构成了更复杂选择器的基础。

1. 元素选择器

元素选择器直接匹配 HTML 元素的标签名，是最基本的选择器类型。

/* 匹配所有<p>元素 */
p {color: #333;line-height: 1.6;
}/* 匹配所有<div>元素 */
div {margin-bottom: 1rem;
}

2. ID 选择器

ID 选择器使用#前缀，匹配具有特定 ID 属性的元素。ID 在文档中应该是唯一的。

/* 匹配id为"header"的元素 */
#header {background-color: #f5f5f5;padding: 1rem;
}/* 匹配id为"logo"的元素 */
#logo {font-size: 1.5rem;font-weight: bold;
}

3. 类选择器

类选择器使用.前缀，匹配具有特定 class 属性的元素。一个类可以应用到多个元素上。

/* 匹配所有class为"btn"的元素 */
.btn {display: inline-block;padding: 0.5rem 1rem;border-radius: 4px;cursor: pointer;
}/* 匹配所有class为"highlight"的元素 */
.highlight {background-color: #fff3cd;border-left: 4px solid #ffeeba;
}

4. 通配符选择器

通配符选择器使用*，匹配文档中的所有元素。

/* 重置所有元素的默认边距和内边距 */
* {margin: 0;padding: 0;box-sizing: border-box;
}

二、组合选择器

组合选择器允许你通过元素之间的关系来选择元素，使选择更加精准。

1. 后代选择器

后代选择器使用空格分隔两个选择器，匹配第一个选择器的后代中符合第二个选择器的元素。

/* 匹配<div>内所有<p>元素（包括嵌套的） */
div p {margin-bottom: 0.5rem;
}/* 匹配class为"article"的元素内所有class为"title"的元素 */
.article .title {font-size: 1.2rem;color: #2c3e50;
}

2. 子元素选择器

子元素选择器使用>分隔，只匹配第一个选择器的直接子元素中符合第二个选择器的元素。

/* 匹配<ul>的直接子元素<li> */
ul > li {list-style: none;margin-bottom: 0.3rem;
}/* 匹配<div>的直接子元素中class为"content"的元素 */
div > .content {padding: 1rem;
}

3. 相邻兄弟选择器

相邻兄弟选择器使用+分隔，匹配第一个选择器后面紧邻的、符合第二个选择器的兄弟元素。

/* 匹配<h2>后面紧邻的<p>元素 */
h2 + p {font-weight: bold;color: #7f8c8d;
}/* 匹配class为"active"的元素后面紧邻的<div>元素 */
.active + div {border-top: 2px solid #3498db;
}

4. 通用兄弟选择器

通用兄弟选择器使用~分隔，匹配第一个选择器后面所有符合第二个选择器的兄弟元素。

/* 匹配<h3>后面所有的<p>兄弟元素 */
h3 ~ p {text-indent: 2rem;
}/* 匹配id为"intro"的元素后面所有class为"item"的兄弟元素 */
#intro ~ .item {margin-left: 1rem;
}

三、属性选择器

属性选择器根据元素的属性或属性值来选择元素，提供了强大的选择能力。

1. 基本属性选择器

匹配具有指定属性的元素，无论属性值是什么。

/* 匹配所有具有title属性的元素 */
[title] {border: 1px dotted #3498db;
}/* 匹配所有具有data-id属性的<div>元素 */
div[data-id] {position: relative;
}

2. 精确属性值选择器

匹配属性值精确等于指定值的元素。

/* 匹配type属性值为"text"的<input>元素 */
input[type="text"] {width: 200px;padding: 0.3rem;
}/* 匹配rel属性值为"nofollow"的<a>元素 */
a[rel="nofollow"] {color: #95a5a6;
}

3. 部分属性值选择器

 [attr~=value]：匹配属性值包含指定单词的元素（单词以空格分隔）

 [attr|=value]：匹配属性值以指定值开头或等于指定值的元素（适合处理语言代码）

 [attr^=value]：匹配属性值以指定值开头的元素

 [attr$=value]：匹配属性值以指定值结尾的元素

 [attr*=value]：匹配属性值包含指定值的元素

/* 匹配class属性包含"button"单词的元素 */
[class~="button"] {border: none;
}/* 匹配href属性以"https"开头的<a>元素 */
a[href^="https"] {background: url('lock-icon.png') no-repeat right center;padding-right: 18px;
}/* 匹配src属性以".png"结尾的<img>元素 */
img[src$=".png"] {border: 2px solid #ecf0f1;
}/* 匹配data-info属性包含"user"的元素 */
[data-info*="user"] {background-color: #f8f9fa;
}

四、伪类选择器

伪类选择器用于选择处于特定状态的元素，通常以:开头。

1. 动态伪类

动态伪类根据用户与元素的交互状态来选择元素。

/* 未访问的链接 */
a:link {color: #3498db;
}/* 已访问的链接 */
a:visited {color: #9b59b6;
}/* 鼠标悬停时的元素 */
a:hover {text-decoration: underline;
}/* 被激活的元素（点击时） */
button:active {transform: translateY(1px);
}/* 获得焦点的元素 */
input:focus {outline: 2px solid #3498db;border-color: #3498db;
}

2. 结构伪类

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

/* 匹配第一个子元素 */
ul li:first-child {font-weight: bold;
}/* 匹配最后一个子元素 */
ul li:last-child {margin-bottom: 0;
}/* 匹配第n个子元素（n从1开始） */
table tr:nth-child(2n) {background-color: #f8f9fa;
}/* 匹配第n个-last子元素 */
ul li:nth-last-child(3) {color: #e74c3c;
}/* 匹配唯一的子元素 */
div:only-child {margin: 0 auto;max-width: 800px;
}/* 匹配第一个某种类型的子元素 */
.container p:first-of-type {font-size: 1.1rem;
}/* 匹配最后一个某种类型的子元素 */
.container p:last-of-type {margin-bottom: 0;
}

3. 其他常用伪类

/* 匹配为空的元素 */
div:empty {height: 20px;background-color: #ecf0f1;
}/* 匹配包含指定文本的元素 */
p:contains("重要") {color: #e74c3c;font-weight: bold;
}/* 匹配被禁用的元素 */
input:disabled {background-color: #ecf0f1;cursor: not-allowed;
}/* 匹配被选中的元素（如下拉列表中的选项） */
option:checked {background-color: #3498db;color: white;
}

五、伪元素选择器

伪元素选择器用于选择元素的特定部分，通常以::开头（CSS3 规范）。

/* 匹配元素内容的第一个字母 */
p::first-letter {font-size: 2rem;float: left;line-height: 0.8;margin-right: 0.2rem;
}/* 匹配元素内容的第一行 */
p::first-line {font-weight: bold;
}/* 在元素内容前插入内容 */
h2::before {content: "►";margin-right: 0.5rem;color: #3498db;
}/* 在元素内容后插入内容 */
h2::after {content: "";display: block;height: 2px;width: 50px;background-color: #3498db;margin-top: 0.5rem;
}/* 匹配选中的文本 */
::selection {background-color: #3498db;color: white;
}/* 匹配输入框中的占位文本 */
input::placeholder {color: #95a5a6;font-style: italic;
}

六、选择器的优先级

当多个选择器匹配同一个元素时，CSS 会根据选择器的优先级来决定应用哪个样式。优先级规则如下：

1. 内联样式（style属性）优先级最高

2. ID 选择器的优先级高于类选择器、属性选择器和伪类

3. 类选择器、属性选择器和伪类的优先级高于元素选择器和伪元素

4. 通配符选择器优先级最低

5. 可以使用!important强制提升样式优先级（谨慎使用）

计算优先级的简化方法：

        每个 ID 选择器：+100

        每个类选择器、属性选择器或伪类：+10

        每个元素选择器或伪元素：+1

例如：

  p：优先级 1

  .class：优先级 10

  #id：优先级 100

  div.class：优先级 1 + 10 = 11

  #id .class：优先级 100 + 10 = 110

七、实际应用技巧

1. 保持选择器简洁：过复杂的选择器会降低性能并难以维护

   /* 不推荐 */
   body > div.container:nth-child(3) > ul.list > li.item:nth-of-type(2) {/* 样式 */
   }/* 推荐 */
   .list .item.highlight {/* 样式 */
   }
   

2. 合理组织选择器顺序：将通用样式放在前面，特殊样式放在后面

3. 利用继承减少重复：让子元素继承父元素的样式，而不是重复定义

4. 使用组合选择器减少类的使用：

   /* 代替为每个警告按钮添加.warning类 */
   .btn[type="button"][data-type="warning"] {background-color: #f39c12;
   }
   

5. 使用伪类和伪元素减少不必要的 HTML 元素：

   /* 用伪元素代替额外的分隔线元素 */
   .nav-item:not(:last-child)::after {content: "";display: inline-block;width: 1px;height: 16px;background-color: #ddd;margin: 0 10px;
   }
   

总结

CSS 选择器是前端开发的基础知识，从简单的元素选择器到复杂的组合选择器，每种选择器都有其特定的应用场景。掌握选择器的使用不仅能让你写出更简洁、更高效的 CSS 代码，还能提高开发效率，减少不必要的 HTML 元素和类名。

随着 CSS 的不断发展，新的选择器也在不断出现，如 CSS4 中引入的:has()伪类，进一步增强了选择器的能力。作为开发者，我们需要不断学习和实践，才能更好地运用这些工具，创建出既美观又高效的网页。

希望本文能帮助你全面了解 CSS 选择器，并在实际项目中灵活运用。如有任何疑问或补充，欢迎在评论区留言讨论！