CSS选择器使用说明

本文档将帮助你理解和使用CSS选择器来采集网页数据。通过合适的选择器，你可以准确地定位和提取所需的内容。

一、基础选择器

1. 类选择器（Class Selector）

语法：.类名
示例：.news-item
说明：选择所有class属性包含"news-item"的元素

<div class="news-item">这个会被选中</div>

2. ID选择器

语法：#ID名
示例：#main-content
说明：选择id属性为"main-content"的元素

<div id="main-content">这个会被选中</div>

3. 标签选择器

语法：标签名
示例：div
说明：选择所有该标签的元素

<div>所有div标签都会被选中</div>

二、组合选择器

1. 后代选择器（空格）

语法：选择器1 选择器2
示例：.news-list .news-item
说明：选择.news-list下的所有.news-item元素（任意层级）

<div class="news-list">
    <div class="news-item">会被选中</div>
    <div class="other">
        <div class="news-item">也会被选中</div>
    </div>
</div>

2. 子元素选择器（>）

语法：选择器1 > 选择器2
示例：.news-list > .news-item
说明：只选择.news-list的直接子元素中的.news-item

<div class="news-list">
    <div class="news-item">会被选中</div>
    <div class="other">
        <div class="news-item">不会被选中</div>
    </div>
</div>

三、复合选择器

1. 多类选择器

语法：.类名1.类名2
示例：.news-item.featured
说明：选择同时具有多个类的元素

<div class="news-item featured">会被选中</div>
<div class="news-item">不会被选中</div>

四、属性选择器

1. 基本属性选择器

语法：[属性名]
示例：[href]
说明：选择具有特定属性的元素

<a href="...">会被选中</a>
<a>不会被选中</a>

五、常见应用场景

1. 新闻列表采集

<!-- HTML结构 -->
<div class="news-list">
    <div class="news-item">
        <h3 class="title">新闻标题</h3>
        <span class="time">发布时间</span>
        <p class="summary">新闻摘要</p>
    </div>
</div>

<!-- 选择器配置 -->
列表选择器：.news-list .news-item
字段映射：
标题:.title
时间:.time
摘要:.summary

六、注意事项

使用选择器时请注意以下几点重要事项

1. 选择器优先级

ID选择器 > 类选择器 > 标签选择器
复合选择器的优先级会叠加

2. 选择器性能

避免过长的选择器链
优先使用类选择器
避免使用过于复杂的选择器组合

3. 调试技巧

使用浏览器开发者工具（F12）验证选择器
在开发者工具的Console中使用document.querySelectorAll()测试选择器
注意选择器的大小写敏感性

4. 常见问题

确保选择器语法正确
检查HTML结构是否符合预期
注意动态加载的内容可能无法直接选择