是否可以选择容器中的第一个元素，否则纯文本而不使用纯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标签的东西？

这是上面的JSFiddle 。

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

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

Answer 1

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

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

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

Answer 2

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

p:first-child > strong:first-child

Answer 3

如何使用*作为第一个元素强大的任何容器应该是不同的颜色：

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

或者像这样：

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

Answer 4

编辑 - 正如评论中指出的那样，这种解决方案很快就会崩溃。 我无法用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选择器，所有好的浏览器（和IE9 +）都支持它。 那个选择器：

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

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

Answer 5

我已经尝试了很多，但我找不到任何方法可以满足你的需要，但无论如何我为你的小提琴添加了一个技巧。 看到这个小提琴只需将<span></span>添加到您的第一个<strong>元素中并定义您的CSS ... 这对您有用吗？

编辑或者您可以在div <strong></strong>定义一个空格，以构建第一个元素。

Answer 6

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

p strong:first-child { ... }

Answer 7

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

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