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;
}

当你有这样的代码时：

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

在每种情况下，'strong' 元素都是其父元素 - 'p' 的唯一子元素。因此，这里的两个“强”元素都将匹配。 这就是为什么你的两个项目都变成了红色。

要仅更改第一段的颜色，您可以编写（正如之前有人提到的那样）：

p:first-child{
    color:red;
  }

或其等价物，即：

p:nth-child(1){
}

我知道这里不适用的最佳情况是 通过添加 'class="red"' 来更改 html 代码，如下例所示：

版本 1：

HTML

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

CSS

.red{
  color:red;
}

版本 2：

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

CSS

.red{
  color:red;
}