我无法获取 HTML 页面上元素的值答案

【问题标题】：I can't get the value of an element on an HTML page我无法获取 HTML 页面上元素的值
【发布时间】：2014-01-18 02:56:29
【问题描述】：

我正在从this page 中提取数据。我能够获得我需要的所有信息，除了前 100 名中每个故事的“排名”（即每个元素标题左侧的数字。）当我检查元素时Chrome，我找不到任何将数字写入页面的 HTML 代码，而且数字似乎不是图像。在 HTML 源代码中，指向数字的元素是“::before”：

<li class="bucket-item">
<div data-post-id="dfa6bc73bd8a" class="post-item post-item-small post-status-">
::before <!-- this is what points to the number of the page-->
...

是否有代表我错过的前 100 名中的帖子排名的脚本或图像？

【问题讨论】：

你是violating their terms of service by scraping their content：“不要从媒体服务中抓取媒体服务或内容。”
感谢您指出@JohnConde。我是新手，所以我仍然想了解他们如何呈现数字。
它在 css 中使用 :before 和 counter-increment 属性。

标签： javascript html css web-scraping screen-scraping

【解决方案1】：

撇开您的行为是否违反 Medium 的 ToS 的问题不谈，::before 是CSS pseudo-element。它不会出现在 HTML 标记中，而是像一个虚拟元素一样，注入到特定选择器的元素之前，您可以对其应用样式。

在这种情况下，选择器是.ordered-posts .post-item-small:before，因此伪元素插入到出现在.ordered-posts 元素内的每个.post-item-small 之前。

伪元素通常与 CSS 生成的内容结合使用，可以在伪元素内部添加一些显示的内容。在这种情况下，内容是从一个 CSS 计数器生成的，每次匹配元素出现时该计数器都会增加，因此列表似乎是编号的！如果你重新排序，你不必担心更新所有的数字；柜台会自动为您处理。很酷！

这里是 ::before 伪元素的一个很好的参考，以及 CSS content 属性的一个很好的文章。

只是为了好玩：关于cool stuff 的一篇很棒的帖子，你可以用伪元素来做。

【讨论】：

谢谢@adamesque，这是一个非常清晰简洁的解释。我发现许多 CSS 属性非常神秘，所以我很高兴你能加入。谢谢。

【解决方案2】：

根据样式表，显然它使用了某种计数机制：

content: counter(posts-counter) ". ";
counter-increment: posts-counter;

如果您的提取机制是按顺序提取故事，您能否添加一个在提取每个故事后递增 1 的计数器？这可能是您最好的选择，因为每个数字都依赖于前一个数字。

【讨论】：