CSS 选择器（CSS Selectors）是用来选取 HTML 文档中的元素的一种方式。CSS 选择器最初是为了样式化 HTML 元素而设计的，但在 Web 开发中，它们也被广泛用于 JavaScript 和前端框架（如 jQuery）来动态操作 DOM（Document Object Model）。在 Web 爬虫中，CSS 选择器同样可以用于从 HTML 页面中提取数据。

1 CSS 选择器的基本语法和功能

1.1 . 基本选择器

  • 元素选择器：直接指定 HTML 元素名称。

    1
    div { /* styles */ }

  • 类选择器：以 . 开头，后面跟着类名。

    1
    .className { /* styles */ }

  • ID 选择器：以 # 开头，后面跟着 ID 名称。

    1
    #idName { /* styles */ }

1.2 . 组合选择器

  • 后代选择器：使用空格来选择一个元素的后代。

    1
    div p { /* styles */ }

  • 子选择器：使用 > 符号来选择一个元素的直接子元素。

    1
    div > p { /* styles */ }

  • 相邻兄弟选择器：使用 + 符号来选择紧邻在前面元素之后的第一个兄弟元素。

    1
    h1 + p { /* styles */ }

  • 通用兄弟选择器：使用 ~ 符号来选择前面元素之后的所有兄弟元素。

    1
    h1 ~ p { /* styles */ }

1.3 . 伪类选择器

  • 属性选择器：使用 [attribute] 来选择具有指定属性的元素。

    1
    input[type="text"] { /* styles */ }

  • 伪类：使用 : 来选择特殊状态的元素。

    1
    2
    3
    :hover { /* styles */ } /* 鼠标悬停 */
    :first-child { /* styles */ } /* 第一个子元素 */
    :last-child { /* styles */ } /* 最后一个子元素 */

1.4 . 通配符选择器

  • 通用选择器：使用 * 来选择所有元素。
    1
    * { /* styles */ }

2 CSS 选择器在 Web 爬虫中的应用

在使用 Python 进行 Web 爬虫开发时，通常会结合 BeautifulSoup 库来解析 HTML，并使用 CSS 选择器来提取数据。

2.1 示例代码

假设我们要从一个网页中提取所有文章标题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
from bs4 import BeautifulSoup

html = '''
<html>
  <body>
    <h1 class="article-title">First Article</h1>
    <h1 class="article-title">Second Article</h1>
    <h1 class="article-title">Third Article</h1>
  </body>
</html>
'''

# 解析 HTML 文档
soup = BeautifulSoup(html, 'html.parser')

# 使用 CSS 选择器提取所有 h1 标题
titles = soup.select('.article-title')

# 输出结果
for title in titles:
    print(title.text)  # 输出：First Article, Second Article, Third Article

3 示例：提取超级英雄的名字

假设你有以下 XML 文件 superHero.xml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<superhero>
  <class>
    <name lang="en">Tony Stark </name>
    <alias>Iron Man </alias>
    <sex>male </sex>
    <birthday>1969 </birthday>
    <age>47 </age>
  </class>
  <class>
    <name lang="en">Peter Benjamin Parker </name>
    <alias>Spider Man </alias>
    <sex>male </sex>
    <birthday>unknow </birthday>
    <age>unknown </age>
  </class>
  <class>
    <name lang="en">Steven Rogers </name>
    <alias>Captain America </alias>
    <sex>male </sex>
    <birthday>19200704 </birthday>
    <age>96 </age>
  </class>
</superhero>

使用 CSS 选择器来提取所有 name 元素的文本内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from bs4 import BeautifulSoup

# 读取 XML 文件内容
with open('./superHero.xml', 'r') as fp:
    body = fp.read()

# 使用 BeautifulSoup 解析 XML
soup = BeautifulSoup(body, 'lxml-xml')

# 使用 CSS 选择器提取所有 name 元素的文本内容
resultName = soup.select('name')
names = [name.get_text(strip=True) for name in resultName]

# 输出结果
print(names)  # 输出：['Tony Stark ', 'Peter Benjamin Parker ', 'Steven Rogers ']

4 总结

CSS 选择器是一种强大而灵活的工具，用于在 HTML 和 XML 文档中精确地定位和提取数据。通过结合 Python 的第三方库，如 BeautifulSoup，可以更加便捷地使用 CSS 选择器来解析和提取数据。掌握 CSS 选择器的基本语法和功能可以帮助你在 Web 开发和爬虫项目中更有效地处理文档结构。