如何使用CSS选择器排除内部标记

Question

我有下面的示例HTML，并且只想从a标记中提取文本，但不包括内部span标记。

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

有没有一种方法可以使用CSS选择器提取$ 450。我试图使用.rate和.rate:not(span)但这些都没有工作

**我正在寻找原生的CSS解决方案 - 就像使用：不是或其他。 **

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，你可以价值存储在.ratedata-*属性，并在其中使用:after伪元素。您可以使用CSS attr，使用伪元素的content属性中的父级属性值。

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

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

Answer 2

用css以使其文本得到隐藏你只能隐藏的元素。

为前：

a.rate span { 
      display : none; 
     } 

如果你婉实现让文本仅$ 450，你应该用Javascript或jQuery的去。