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

Answer 2

jQuery怎么样？我可以使用Jquery进行目标，然后包装元素在它周围？

好吧，你可以选择文本节点并添加一个包装器，如下所示：

$('.ProductPriceRating')
  .find("em")
  .contents()
  .filter(function() {
    return this.nodeType === 3; // filter the text node
  }).wrap("<span></span>");

<强> WORKING DEMO

<强> CSS：

.ProductPriceRating span {
    color: red;
}

Answer 3

无法在CSS中选择特定文本，但在您的情况下，您可以覆盖CSS属性。

以下是一个例子：

.ProductPriceRating em{font-weight:700; font-size:20px; color:darkgreen}
.ProductPriceRating em .RetailPriceValue{color:#AAA; font-size:11px}

Working Demo

<强>增加：

正如您在上面的评论中提到的那样，您希望使用jQuery来完成它，就像使用元素包装文本一样。这是一个例子：

$(".ProductPriceRating").each(function(c, obj){
    obj = $(obj).find(">em"),
    retailPrice = obj.find(".RetailPriceValue").detach(),
    newNode = $("<b/>").text($.trim($(obj).text()));

    obj.html(newNode).prepend(retailPrice);
});

jQuery Demo

在那里查看CSS，两者都是分开工作......

定位文本但不使用CSS定位兄弟元素

3 个答案: