如何使用CSS选择器

Question

我提供了以下示例HTML，并希望仅从a标记中提取文本，不包括内部span标记。

<a href="#" class="rate">
 <span>For Sale </span>
$450.00
</a>

有没有办法只使用CSS选择器提取$ 450。我尝试使用.rate和.rate:not(span)，但这些都不起作用

**我只是在寻找原生的CSS解决方案 - 比如使用：not或其他。 **

Answer 1

您可以将Node.nextSibling用于元素的下一个兄弟文本。

var text = document.querySelector(".rate > span").nextSibling.textContent.trim();
console.log(text);

<a href="#" class="rate">
 <span>For Sale </span>
$450.00
</a>

修改 如果您想使用CSS，可以将价格值存储在data-*的{​​{1}}属性中，并在其中使用:after个伪元素。您可以使用CSS content在伪元素的attr属性中使用parent的attribute值。

.rate

.rate:after {
  content: attr(data-price);
  color: red;
}

Answer 2

使用css，您只能隐藏元素，以便隐藏文本。

代表：

a.rate span {
           display : none;
      }

如果你想获得只需450美元的文本，你应该使用Javascript或jquery。