使用 css 选择器提取属性值答案

【问题标题】：Extract attribute value using css selectors使用 css 选择器提取属性值
【发布时间】：2020-01-02 07:28:10
【问题描述】：

从下面的 HTML 中，我希望仅使用 CSS 选择器提取“data-url”中的链接（无方法）。

<a class="btn" data-url="https://example.com">

顺便说一句，我正在尝试使用名为 webscraper.io 的 _scraper 工具抓取网站，其中必须使用 CSS 选择器指定要提取的数据.因此，我无法使用其他编程语言的任何有用方法。

【问题讨论】：

css 选择器匹配它们不提取。
@QHarr：一些网页抓取工具包括特殊的非标准选择器（在 CSS 选择器语法中），它们实际上会为您进行提取。 webscraper.io 似乎对“选择器”有一个完全不同的定义除了传统的“CSS 选择器”，看起来提问者需要两者，考虑到这个工具的方式设计。
@QHarr：但这个问题很特别——在绝大多数网络抓取问题中，这种区别实际上并不重要。任何时候有人要求“使用选择器/XPath 提取 [...]”，这几乎暗示他们想要 1）使用选择器匹配元素，然后然后 2）从匹配的内容中提取数据。一旦有人说他们只能传入选择器/XPath 字符串，这种区别就变得很重要，即使这样，他们也可能已经意识到这种区别。
@BoltClock 我更正了 :-) 绝对值得知道，谢谢。

标签： css web-scraping css-selectors

【解决方案1】：

您可以使用元素属性从标签中提取 url，然后在属性名称字段中指定属性名称data-url。

您可以参考以下站点地图以供参考。

{"_id":"stack-sample","startUrl":["http://elitesolution.co.in/sample/inde.html"],"selectors":[{"id":"a parent","type":"SelectorElementAttribute","parentSelectors":["_root"],"selector":"a","multiple":false,"extractAttribute":"data-url","delay":0}]}

【讨论】：

【解决方案2】：

我唯一能想到的是：

.btn::after {
  content: ' ' attr(data-url);
}

工作示例：

  .btn::after {
content: ' ' attr(data-url);
  }

&lt;a class="btn" data-url="https://example.com"&gt;URL:&lt;/a&gt;

【讨论】：