CSS元素子对象与文本节点的子对象

Question

我有一个包含子项的元素和另一个具有相同子项的元素，但是还有一个文本节点：

<p><strong>This should be heading</strong></p>
...
<p>There is a sentence that has <strong>strong text</strong> inside it.</p>

我无法以任何方式修改DOM结构，包括没有JavaScript。我所能做的只是编辑CSS，但我希望内联strong的样式与唯一的孩子strong不同。

我认为这可行：

p strong:only-child
{
    color: red;
}

然而，both items turn red。

有没有办法只使用CSS来定位没有文本节点兄弟节点的子节点？

我不认为可以做到，但我想我会问，以防有一些聪明的解决方法。

Answer 1

根据我的理解，我认为它应该像

p:first-child
{
    color: red;
}

JSFiddle

Answer 2

以下代码无法正常运行。

>

当你有这样的代码时：

p strong:only-child{
    color: red;
}

在每种情况下，强大的＆＃39; element是其父级的唯一子元素 - ＆＃39; p＆＃39;。因此，两者都很强大。这里的元素将匹配。 这就是为什么你的物品都变红了。

要改变第一段的颜色，你可以写（如前所述）：

<p><strong>This should be heading</strong></p>
...
<p>There is a sentence that has <strong>strong text</strong> inside it.</p>

或其等价物，即：

p:first-child{
    color:red;
  }

我知道在这里不适用的最佳情况是  通过添加＆＃39; class =＆＃34; red＆＃34;＆＃39;来更改html代码就像在这些例子中一样：

版本1：

HTML

p:nth-child(1){
}

CSS

<p><strong class="red">This should be a heading</strong></p>
<p>This is a sentence with <strong>strong text</strong> in it.</p>

第2版：

.red{
  color:red;
}

CSS

<p class="red"><strong>This should be a heading</strong></p>
<p>This is a sentence with <strong>strong text</strong> in it.</p>