jquery - 使用 CSS 定位文本但不定位同级元素

Question

在下面的示例中，我尝试定位“$59.00”

<div class="ProductPriceRating">
    <em>
        <strike class="RetailPriceValue">$69.00</strike> 
        $59.00
    </em>
</div>

我对此有点困惑。

Answer 1

除非您愿意更改 DOM 或覆盖，否则您无法执行此操作。

因此，您需要使用 span 元素来包装文本，而不是像这样的目标

div.ProductPriceRating > em > span {

}

否则，如果您无法更改 DOM，则需要使用两个选择器，第一个选择器会将样式应用于 em，下一个选择器将使用 strike 覆盖该样式

Demo

div.ProductPriceRating > em {
    color: red;
}

div.ProductPriceRating > em > strike {
    color: black;
}

<小时/>

您可以使用的另一种方式是:not，但如果您使用color，那么继承会给您带来问题

Demo

div.ProductPriceRating em:not(.RetailPriceValue) {
    background: red;
}

<小时/>

正如您所评论的，您愿意使用 jQuery，那么我们正在使用 jQuery 包装节点..

$(".ProductPriceRating em").contents().filter(function() {
    return this.nodeType != 1; //or return this.nodeType == 3;  <-- Preferable 
}).wrap("<span></span>");

Demo