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

【问题标题】：Targetting text but not targeting sibling element with CSS使用 CSS 定位文本但不定位兄弟元素
【发布时间】：2014-02-05 03:28:44
【问题描述】：

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

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

我对此有点困惑。

【问题讨论】：

CSS 无法定位文本节点
Jquery 怎么样？我可以用 Jquery 定位它，然后在它周围包裹一个元素吗？
是的，这很有可能找到您要查找的文本，并用一些元素将其包装起来。但在这种情况下，最好在创建 HTML 节点时将其包装起来。
在这种情况下，我无法手动更改 HTML。我正在一个不允许我使用的托管平台上工作
好的，所以添加了你在我的回答中要求的 jQuery 选项。

标签： jquery html css css-selectors

【解决方案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

【讨论】：

我无法直接更改 dom。唯一的方法是通过 javascript/jquery
Only way would be through javascript/jquery。不，上面的第二个演示展示了如何单独使用简单的 CSS。
@ralph.m 不，继承是一个问题，所以我保持原样，因为这个原因，我之前没有提供:not 解决方案，OP 想要颜色而不是背景，但我再次编辑并重新分享:)
我试过 jquery $('.ProductPriceRating em:not(.RetailPriceValue)').wrap("
");，但没用
@JackPilowsky 好的，如果你愿意使用 jQuery，我会提供一个

【解决方案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;
}

【讨论】：

@Mr.Alien OOPS :) 我正在写答案：P
无论如何 +1 离我很近：D

【解决方案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，两者都是独立工作的......

【讨论】：