Web Scraping & Bots · 课时

使用 CSS 选择器遍历 DOM

将 CSS 选择器与 BeautifulSoup 结合，在解析 HTML 时精准定位元素，超越基础的标签名称搜索。

第 4 / 4 课13 个步骤

使用 CSS 选择器遍历 DOM 是 CoddyKit 上的免费 Web Scraping & Bots 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Web Scraping & Bots 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Scraping & Bots 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Why CSS Selectors?

You can find tags by name with BeautifulSoup, but real pages need precision. CSS selectors let you target elements exactly like a stylesheet would.

select vs find

BeautifulSoup offers select() (returns a list) and select_one() (returns the first match) that accept CSS selector strings.

from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')
items = soup.select('li')
first = soup.select_one('h1')

Selecting by Class

Prefix a class name with a dot.

prices = soup.select('.price')
for p in prices:
    print(p.get_text())

Selecting by ID

Prefix an id with a hash. IDs are unique, so pair with select_one.

header = soup.select_one('#main-header')
print(header.get_text())

Descendant Selectors

A space means descendant: match elements nested anywhere inside another.

titles = soup.select('div.product h2')
for t in titles:
    print(t.get_text(strip=True))

Direct Child Selectors

A > matches only direct children, not deeper descendants.

rows = soup.select('table > tbody > tr')
print(len(rows))

Attribute Selectors

Target elements by attribute values inside square brackets.

links = soup.select('a[href^="https"]')
images = soup.select('img[alt]')

Combining Selectors

Chain conditions for tight targeting — tag, class and attribute together.

buttons = soup.select('button.cta[data-action="buy"]')

Extracting Attributes

Once selected, read attributes like href or src with bracket access.

for a in soup.select('a.product-link'):
    print(a['href'])

nth-of-type

Pseudo-classes like :nth-of-type pick elements by position.

second = soup.select('ul li:nth-of-type(2)')
print(second[0].get_text())

A Full Mini Example

Combine everything to scrape a list of product names and prices.

for card in soup.select('div.card'):
    name = card.select_one('.title').get_text(strip=True)
    price = card.select_one('.price').get_text(strip=True)
    print(name, price)

Quick Check

Which CSS selector matches an element whose class is exactly price?

在交互式课程中回答

Recap

You learned CSS selectors in BeautifulSoup:

select / select_one
Class (.), id (#), descendant and child (>) selectors
Attribute selectors and pseudo-classes
Extracting attributes

CSS selectors let you target exactly the data you need on complex pages.

免费开始

用 AI 导师学习 Python — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 12
课程: 48

免费开始学习查看完整课程

常见问题解答

「使用 CSS 选择器遍历 DOM」课时是免费的吗？

是的 — 「使用 CSS 选择器遍历 DOM」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Scraping & Bots 课程的其余内容，请升级到 CoddyKit PRO。 Web Scraping & Bots 课程共包含 4 节课。

「使用 CSS 选择器遍历 DOM」这节课中我会学到什么？

将 CSS 选择器与 BeautifulSoup 结合，在解析 HTML 时精准定位元素，超越基础的标签名称搜索。你通过在浏览器中直接运行的动手代码来练习 Web Scraping & Bots，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Scraping & Bots 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Web Scraping & Bots 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 CSS 选择器遍历 DOM」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Web Scraping & Bots 课中编写并运行代码吗？

能。每节 Web Scraping & Bots 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Web Scraping & Bots