Web Scraper教程：Web Scraper：如何使用CSS选择器抓取网页数据

在Web Scraper中，CSS选择器是用来在网页中查找HTML元素并从中提取数据的工具。每当你在页面中选中一个元素时，Web Scraper 会自动生成一个猜测的CSS选择器，但你也可以自行编写并测试选择器。

CSS选择器的强大之处在于它能通过网页元素的各种属性（如标签名、类名、ID、属性等）来锁定你想要的数据。Web Scraper支持CSS 1-4版本中的选择器，同时还支持jQuery的伪选择器，让你可以处理更加复杂的选择需求。

常用CSS选择器

类选择器：使用元素的class属性来选择。

    
    .classname

ID选择器：通过元素的ID属性来选择。

    
    #element-id

属性选择器：通过元素的属性值进行选择。

    
    [type='text']

子元素选择器：选择某个父元素内的直接子元素。
```
    
    div > p

    
```
div > p
后代选择器：选择某个父元素下的任意后代元素。
```
    
    div p

    
```
div p
伪类选择器：选择特定状态的元素，比如第一个子元素。
```
    
    div:first-child

    
```
div:first-child
伪元素选择器：选择元素的一部分，如文本的首字母。
```
    
    p::first-letter

    
```
p::first-letter

Web Scraper还支持jQuery伪选择器，这些选择器能够处理更为复杂的选择需求，例如根据元素内容或结构状态来筛选目标。

选择包含特定文本的元素

    
    div:contains('特定文本')

选择不包含特定文本的元素

    
    div:not(:contains('特定文本'))

选择包含某个子元素的父元素

    
    div:has(p)

Web Scraper还额外添加了一个父级选择器，可以让你在选中某个元素后，再选中它的父元素。这在需要从子元素返回父元素的属性时非常有用。

例如，你用Element选择器选中了某个子元素，而你想提取父元素的某个属性。你可以使用以下CSS选择器：

    
    _parent_

对于一些嵌套在iframe或shadow-root中的内容，你可以通过自定义CSS选择器来选中这些特殊结构中的元素。

要选择iframe内部的元素，首先选中iframe元素，随后添加:iframe后缀，接着继续添加内部元素的选择器。例如：

    
    iframe:iframe .selector-within-iframe

要选择shadow-root中的元素，先选中shadow-root的父元素，然后加上:shadow-root后缀，接着继续选择内部元素。例如：

    
    .shadow-root-parent-element:shadow-root .selector-within-shadow-root

在编写好CSS选择器后，你可以通过Web Scraper中的“Element preview”按钮来测试选择器是否正确。预览功能会显示被选中的元素个数，帮助你确认选择器是否准确定位了想要的元素：

假设你想选择一个包含某个具体文本的元素，比如一个产品列表中的某个商品：

    
    div.product-title:contains('iPhone')

如果你想选择没有特定文本的元素，比如一个没有“促销”标签的商品，你可以使用以下选择器：

    
    div.product:not(:contains('促销'))

在我看来，CSS选择器确实是Web Scraper中最灵活强大的功能之一。无论是简单的文本提取，还是复杂的结构处理，CSS选择器都能精准高效地完成任务。而通过结合jQuery的伪选择器，Web Scraper可以处理更多样化的选择需求，特别是在处理嵌套元素或需要动态抓取时，更是不可或缺的利器。

如果你经常需要抓取复杂网页的数据，掌握CSS选择器的用法绝对能让你的抓取工作事半功倍！

想了解如何利用RPA+AI打造图文工厂扫描下方二维码加入星球扫码加入知识星球

阅读全文