另一个元素内的文本和元素的不同样式答案

【问题标题】：Different styles for text and elements inside another element另一个元素内的文本和元素的不同样式
【发布时间】：2014-06-06 09:15:18
【问题描述】：

我正在尝试在 Asp.Net MVC 中设置 WebGrid 元素的寻呼机样式。寻呼机看起来像这样：

<td colspan="4">
    <a href="#"><<</a>&nbsp;
    <a href="#">1</a>&nbsp;
    &nbsp;2&nbsp;
    <a href="#">3</a>&nbsp;
    <a href="#">>></a>&nbsp;
</td>

虽然我可以轻松地设置a 元素的样式，但我在设置“未标记”文本（在本例中为2）时遇到了问题。有没有办法可以只定位/选择文本而不是锚元素？（JSFiddle 提供）

【问题讨论】：

喜欢在&nbsp;2&nbsp;周围加边框和背景？
@SalmanA，没错。举一个基本的例子，假设我想像a 元素一样设置它的样式，但使用不同的背景颜色（蓝色）。
@AndreiV 您的示例中未标记的文本只是一个 文本节点，据我所知，我们无法设置 文本节点 的样式CSS 不基于文本节点的父节点的样式（我们可以设置一些样式，例如 color 但background 不能应用于特定文本通过父节点）。
@KingKing，我最初的研究得出了类似的结论。然而，我今天醒来时充满了乐观，并认为有人可能至少对我能做什么有所暗示。
我在这里尝试过的只是一个肮脏的解决方法jsfiddle.net/viphalongpro/U7Wsh/1 它看起来不太好，但我认为你不会有任何漂亮的解决方案来解决这个问题。默认情况下让它们为黑色（没有背景）可能会更好。

标签： javascript css webgrid

【解决方案1】：

我不知道任何可以定位文本节点的 CSS 选择器。您可以使用 JavaScript 或 jQuery 将活动链接包装在标签内；然后适当地设计它。这是一个例子：

$(".pagination").contents().filter(function () {
    return this.nodeType === Node.TEXT_NODE && /\d+/.test(this.nodeValue);
}).wrap("<b></b>");

Demo here

【讨论】：

我实际上并没有考虑“直接”CSS 选择器。我怀疑可能有一种针对元素的那部分的简洁方法，但不确定如何解决它。你的解决方案是完美的。谢谢！