CSS基础教程（四十九）选择器汇总：CSS选择器全解，从青铜到王者的选择器秘籍

原创

于 2025-09-12 09:51:07 发布 · 699 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

引言：为什么你的CSS需要"选择"困难症？

在CSS的世界里，选择器就是你的超能力。想象一下：你是一个网页世界的魔法师，而选择器就是你的咒语——念对咒语，精准控制页面元素；念错咒语，页面变成一团糟！

很多开发者常年只使用class选择器，这就像拥有一把瑞士军刀却只用来开瓶盖。本文将带你深入CSS选择器的魔法世界，从基础到高级，从常见到隐匿，全面解锁选择器的力量。

第一章：选择器基础概念——选择器是如何工作的？

在深入各类选择器之前，我们需要了解浏览器是如何读取和理解选择器的。有趣的是，浏览器从右向左读取选择器！这意味着选择器的最右侧（称为关键选择器）决定了效率高低。

/* 浏览器先找到所有span，再找在li内的，最后找在ul内的 */
ul > li > span { color: red; }

了解这一原理对我们编写高效选择器至关重要。现在，让我们开始探索各类选择器的奇妙世界吧！

第二章：基本选择器——CSS选择的基石

基本选择器是CSS中最基础也是最常用的选择器类型，它们是构建复杂选择的起点。

选择器类型	语法示例	描述	示例代码
通用选择器	`*`	选择所有元素	`* { margin: 0; }`
元素选择器	`div`	选择指定标签元素	`div { padding: 10px; }`
类选择器	`.class`	选择指定class的元素	`.active { color: red; }`
ID选择器	`#id`	选择指定id的元素	`#header { height: 60px; }`
属性选择器	`[attr]`	选择带有指定属性的元素	`[target] { background: yellow; }`

<!DOCTYPE html>
<html>
<head>
<style>
/* 通用选择器 */
* { 
  box-sizing: border-box; 
}

/* 元素选择器 */
p {
  font-size: 16px;
  line-height: 1.5;
}

/* 类选择器 */
.highlight {
  background-color: yellow;
  padding: 5px;
}

/* ID选择器 */
#special-paragraph {
  border: 2px solid blue;
  padding: 10px;
}

/* 属性选择器基本用法 */
[data-type] {
  font-weight: bold;
}
</style>
</head>
<body>
  <p>普通段落</p>
  <p class="highlight">高亮段落</p>
  <p id="special-paragraph">特殊段落</p>
  <div data-type="important">重要数据</div>
</body>
</html>

第三章：组合选择器——元素关系的艺术

组合选择器（也称为关系选择器）允许我们基于元素之间的关系选择元素，这是CSS强大的核心所在。

选择器类型	语法示例	描述	示例代码
后代选择器	`div p`	选择div内的所有p元素	`div p { color: blue; }`
子选择器	`div > p`	选择直接是div子元素的p	`div > p { color: red; }`
相邻兄弟选择器	`div + p`	选择紧接在div后的p元素	`div + p { margin-top: 0; }`
通用兄弟选择器	`div ~ p`	选择div之后的所有同级p	`div ~ p { font-style: italic; }`

<!DOCTYPE html>
<html>
<head>
<style>
/* 后代选择器 */
.container p {
  color: #555;
}

/* 子选择器 */
.container > p {
  border-left: 3px solid green;
  padding-left: 10px;
}

/* 相邻兄弟选择器 */
h2 + p {
  font-size: 18px;
  font-weight: bold;
}

/* 通用兄弟选择器 */
h2 ~ p {
  margin-left: 20px;
}
</style>
</head>
<body>
  <div class="container">
    <p>这个段落是.container的直接子元素</p>
    <div>
      <p>这个段落是.co