html - 是否可以在不使用纯 CSS 中的类或标识符的情况下选择纯文本容器中的第一个元素？

Question

这是一个纯粹的假设情况。昨天在回答一个问题时，我遇到了一个我以前没有遇到过的问题。这个问题本身就有很大的缺陷，因为你根本不会做它试图达到的目标，但这个问题可能会在其他情况下出现。我无法给出一个不涉及更改标记的有效答案，我想知道在不更改标记的情况下是否有可能。

举个例子：

<p><strong>Lorem</strong> ipsum dolor <strong>sit</strong> amet...</p>

要设置第一个元素的样式，strong您只需使用p > strong:first-child或类似的东西。这很好而且效果很好，但是如果第一个strong是可选的并且它只是第一个strong需要样式呢？

<p>Lorem ipsum dolor <strong>sit</strong> amet...</p>

是否可以确保只设置第一个strong标签而不使用类、标识符或任何可以strong通过标记区分两个标签的东西？

注意：从最初的答案来看，这个问题可能有点误导。该段落不必是页面上的第一个段落，因此p:first-child不是解决方案。第一段可能没有这个前导strong元素 - 或者第二段也可以有这个前导strong元素。

编辑：我已经更新了 JSFiddle 示例，以更清楚地说明应该和不应该设置什么样式。

score 2 · Accepted Answer

不幸的是，这是不可能的。

问题是 CSS 只选择元素节点，文本节点不是元素节点。所以，就 CSS 而言，blah blah blah blah blah也可能是.

换句话说，您的强标签是其父元素中的第一个元素，无论它前面是否有文本，即使前面有文本时它不是第一个节点。

score 1 · Accepted Answer

1

也许，这就是你想要做的：

p:first-child > strong:first-child

于 2013-03-18T09:13:38.310 回答

score 1 · Accepted Answer

将 * 用于任何容器怎么样，它的第一个元素是 strong 应该是不同的颜色：

* > strong:first-child { color:#f30; }

或者像这样：

 * > p > strong:first-child { color:#f30; }

score 1 · Accepted Answer

编辑- 正如评论中指出的那样，这个解决方案很快就崩溃了。我可以看到，没有一种仅限 CSS 的方法来实现这一点。

我想出了一个纯 CSS 解决方案。这是CSS（基于您修改后的示例）：

p > strong { color:blue; }
p > strong:first-child { color:red; }
p > strong:nth-last-child(-n+1) { color:blue; }

呈现：

nth-last-child 示例

这利用了:nth-last-child选择器，所有优秀的浏览器（和 IE9+）都支持该选择器。那个选择器：

…匹配文档树中具有+b-1个兄弟的元素，对于给定的n值正或零，并且具有父元素

这些选择器的顺序很重要，因为每个选择器的特异性都是相同的，因此我们需要strong用每个后续选择器覆盖先前的目标。

score 1 · Accepted Answer

我已经尝试了很多，但我找不到任何可以满足您需求的方法，但无论如何我已经为您的小提琴添加了一个技巧。看到这个小提琴 只是添加到你的第一个元素并定义你的css......这对你来说好吗？

编辑或者你可以在你的 div 中定义一个空白 strong来制作第一个元素。

score -1 · Accepted Answer

-1

我想这就是你要找的...

p strong:first-child { ... }

于 2013-03-18T09:12:34.283 回答

score -1 · Accepted Answer

看看这个它可能会解决你的问题：http: //jsfiddle.net/RNpsG/1/

body > p:first-child > strong:first-child { color:#f30; }

7 回答 7