CSS 选择器详解：元素、类、ID、后代、子元素、兄弟和属性选择器

爬虫为什么要学 CSS 选择器？

CSS 选择器最早是用来给网页元素加样式的。例如选中标题改颜色，选中按钮加圆角，选中图片设置大小。

但对爬虫来说，选择器还有一个更重要的作用：定位数据。

当你要从网页里提取标题、图片、链接、价格、评分时，本质上都在做同一件事：从 DOM 树里选中目标元素，再取出里面的文本或属性。

所以选择器不是前端专属知识，而是爬虫入门必须掌握的基础能力。

CSS 选择器有哪三种写法？

在了解选择器之前，先看 CSS 代码可以写在哪里。

内联样式怎么写？

内联样式直接写在元素的 style 属性里，只影响当前元素。

<h1 style="color: red;">爬虫你好</h1>

这种写法很直观，但不适合大量复用。

内部样式表怎么写？

内部样式表写在 head 里的 style 标签中。

<style>
  h1 {
    text-align: center;
  }
</style>

这里的 h1 就是元素选择器，它会选中页面上所有 h1 元素。

外部样式表怎么引入？

外部样式表写在独立的 CSS 文件里，再通过 link 引入。

<link rel="stylesheet" href="/style.css" />

大型网站通常会使用外部样式表，方便维护和复用。

CSS 基础选择器有哪些？元素、类、ID 怎么用？

基础选择器先掌握三类：

元素选择器
类选择器
ID 选择器

元素选择器怎么用？

元素选择器直接写标签名，会选中页面上所有同类型元素。

h1 {
  color: red;
}

如果要同时选中多个标签，可以用逗号分隔：

a,
img,
button {
  display: block;
}

在爬虫中，元素选择器适合粗略定位，例如先拿到所有链接：

但它通常不够精确，因为页面上可能有大量相同标签。

类选择器怎么用？

类选择器用点号 . 开头，后面跟类名。

.container {
  display: flex;
}

它会选中所有 class 包含 container 的元素。

HTML 里可以这样写：

<div class="container">内容区域</div>

类选择器在爬虫里非常常用。例如很多列表卡片会有稳定的类名：

.movie-card

如果你想批量提取列表数据，通常会先选中每个卡片容器。

ID 选择器怎么用？

ID 选择器用井号 # 开头。

#btn {
  background: black;
  color: white;
}

HTML 中对应：

<button id="btn">提交</button>

规范上，id 在同一个页面里应该唯一。所以 ID 选择器通常只选中一个元素。

在爬虫中，如果目标元素有稳定唯一的 ID，定位会非常方便。但实际网站里，很多 ID 可能由前端框架动态生成，不一定适合长期依赖。

CSS 选择器怎么组合？后代、子元素、多个类名怎么用？

真实网页结构通常不止一层，所以只会基础选择器还不够。接下来要掌握组合选择器。

后代选择器怎么用？空格代表什么意思？

后代选择器用空格表示"在它里面找"。

.container img {
  border-radius: 50%;
}

意思是：选中 .container 内部所有层级的 img 元素。不管图片是直接子元素，还是藏在更深层的容器里，只要在 .container 里面，都算后代。

爬虫场景中，后代选择器很常见：

.movie-card .title

表示在每个电影卡片里找标题。

子元素选择器怎么用？大于号和空格有什么区别？

子元素选择器用 > 表示，只选中直接子元素。

.container > img {
  width: 160px;
}

如果 img 外面还包了一层 div，这条选择器就选不中它。

它适合结构比较明确、希望避免误选更深层元素的场景。

多个类名同时匹配怎么写？

一个元素可以有多个类名：

<img class="movie featured" src="/cover.webp" alt="电影封面" />

如果要选中同时拥有这两个类名的元素，可以连着写：

.movie.featured

注意中间没有空格。如果写成 .movie .featured，意思就变成了在 .movie 里面找 .featured 后代元素。

这个区别非常重要，少一个空格和多一个空格，选择结果完全不同。

CSS 兄弟选择器怎么用？加号和波浪线有什么区别？

兄弟选择器用于选择同一层级中，某个元素后面的元素。

相邻兄弟选择器怎么用？加号选的是什么？

+ 只选中紧挨在后面的第一个兄弟元素。

a + img {
  border: 2px solid red;
}

它表示：选中紧跟在 a 后面的第一个 img。

通用兄弟选择器怎么用？波浪线选的是什么？

~ 会选中后面所有符合条件的同级元素。

a ~ img {
  border: 2px solid red;
}

它表示：选中 a 后面所有同级的 img。

兄弟选择器在爬虫里不如类选择器高频，但遇到"标题后面的价格""标签后面的值"这类结构时，会很有用。

CSS 属性选择器怎么用？能匹配链接和图片吗？

属性选择器用于根据元素属性进行匹配。它在爬虫里尤其重要，因为链接、图片、接口入口经常藏在属性里。

属性选择器有哪些常见写法？

常见写法如下：

[href]

选中所有带 href 属性的元素。

[href="https://www.xfei.tech"]

选中 href 完全等于指定地址的元素。

[href^="http"]

选中 href 以 http 开头的元素。

[href$=".tech"]

选中 href 以 .tech 结尾的元素。

[href*="xfei"]

选中 href 中包含 xfei 的元素。

属性选择器在爬虫里怎么用？

爬虫中经常会用属性选择器筛选链接，例如：

a[href*="/detail/"]

表示选中所有 href 中包含 /detail/ 的详情页链接。

CSS 伪类选择器怎么用？:not 和 :empty 能帮爬虫做什么？

伪类选择器用冒号开头，用来描述元素的特殊状态或筛选规则。

:not(...) 怎么用？怎么排除某些元素？

a:not(.doc) {
  font-size: 18px;
}

这表示选中所有不是 .doc 的 a 元素。

在数据提取中，如果你想排除某些广告链接、文档链接或空链接，:not(...) 会很方便。

:empty 怎么用？能识别空元素吗？

a:empty {
  display: none;
}

:empty 会选中没有子节点内容的元素。它可以帮助你识别页面里没有文本的空标签。

JavaScript 和 Python 怎么用 CSS 选择器查找元素？

选择器不只出现在 CSS 里。 JavaScript 也可以用选择器查找元素：

const btn = document.querySelector("#btn")
const links = document.querySelectorAll("a[href]")

后面写爬虫时，很多解析库也支持 CSS 选择器。例如在 Python 的 BeautifulSoup 里：

from bs4 import BeautifulSoup

soup = BeautifulSoup(html, "html.parser")
titles = soup.select(".movie-card .title")
links = soup.select('a[href*="/detail/"]')

你会发现，不管是 CSS、JavaScript 还是 Python，选择器的核心思想都是一样的：从 DOM 树里选中你想操作的元素。

爬虫 CSS 选择器有哪些实战技巧？

写选择器时，建议遵循这几个原则：

优先从稳定的列表容器开始选。
不要只依赖过于宽泛的标签名，例如 div、span。
类名语义清晰时，优先使用类选择器。
ID 稳定且唯一时，可以使用 ID 选择器。
提取链接和图片时，多关注 href、src、alt 等属性。
选择器越短越好，但前提是不会误选。
页面结构复杂时，先在开发者工具里验证选择结果。

一个推荐模式是：

.list-item .title

而不是：

body div div div h2

后者太依赖页面层级，一旦前端结构稍微调整，就容易失效。

总结

CSS 选择器的核心目的只有一个：选中你想操作的元素。

在前端里，选中元素是为了改样式；在 JavaScript 里，选中元素是为了做交互；在爬虫里，选中元素是为了提取数据。

先掌握元素、类、ID、后代、子元素、兄弟、属性和伪类选择器，就足够应对大多数入门级网页解析场景。后面再学习 XPath、浏览器抓包和动态页面分析时，你会发现这些选择器思维仍然是通用的。

CSS 选择器入门：从改样式到爬虫数据定位