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