webscraper 常用 CSS 伪类(不定期更新)

奇技淫巧 tesths 2年前 (2019-08-03) 2200次浏览 0个评论

在 Webscraper 抓取过程中,会遇到想获取第几个或者多个标签的需求。下面整理一些 Web Scraper 常用的 css 伪类。

1. 选择首个元素 :nth-of-type(1)

使用 :nth-of-type(1) 获取首个元素。

示例

span:nth-of-type(1) 匹配第一个 <span> 元素

webscraper 常用 CSS 伪类(不定期更新)

对应 html 标签

webscraper 常用 CSS 伪类(不定期更新)

2. 获取第 n 个元素 :nth-of-type(n)

示例

li:nth-of-type(13) 匹配第一个 <li> 元素

webscraper 常用 CSS 伪类(不定期更新)

对应 html 标签

webscraper 常用 CSS 伪类(不定期更新)

3. 不包含元素 :not(n)

选取不包含 n 的元素。

示例

li:not(.k20d) 选取 class 不是 .k20d 的元素

webscraper 常用 CSS 伪类(不定期更新)

对应 html 标签

webscraper 常用 CSS 伪类(不定期更新)

示例中,li class=”k20d” 为一个横线标签。在选取过程中不需要。所以我们使用 li:not(.k20d),将含有 k20d 的元素去除,这样选择的都是含有内容的标签。

如果有多个元素不包括,可写为 .content div:not(.reply):not(.quote) 这种形式。

4. 选取前 number 个元素 :nth-of-type(-n+number)

选取前 number 个元素。

示例

网址 https://ruby-china.org/topics/excellent

selector div.topic:nth-of-type(-n+4)

webscraper 常用 CSS 伪类(不定期更新)

5. 选取倒数第 n 个元素 :nth-last-of-type(n)

选取倒数第 n 个元素。

示例

网址 https://ruby-china.org/topics/excellent

selector div.topic:nth-last-of-type(3)

webscraper 常用 CSS 伪类(不定期更新)

喜欢 (10)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址