CSS元素子元素与带有文本节点的子元素

我有一个元素有一个子元素，另一个元素有同一个子元素，但还有一个文本节点：

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

然而

有没有一种方法可以只使用CSS来定位没有文本节点同级的子节点

---

我认为这是办不到的，但我想如果有什么聪明的办法，我会问的。

根据我的理解，我认为应该是这样的

p:first-child
{
    color: red;
}

---

以下代码无法正常工作

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>

或其等效物，即：

p:nth-child(1){
}

最好的情况是 通过添加“class=”red“更改html代码，如以下示例所示：

第1版：

HTML

第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>

---

这不能用选择器来完成。也就是说，你想把哪个

strong

变成红色？两个

strong

元素都是内联的，恰好其中一个元素被非空白文本包围。我更新了我的示例代码，因为空白不是一个因素。我们的目标是使假标题（强标题周围没有文本）变为红色，而句子内部的强标题保持为黑色。我认为这在css中是不可能的，因为在这两种情况下，你都有一个带有强标题的p。如果您不能更改html，我想您需要一些javascript。内联文本本身不被视为节点。因此，这是不可能的。但是，您可以根据标签在整个文档中的位置（相互之间的关系等）设置标签的样式。我发现只有一种方法可以在纯CSS中区分这些情况—检查

p:first-letter

是否在

p strong

内。但这种方法似乎只能用于背景风格：好主意。不幸的是，这个简化的示例排除了其他

p

元素，这些元素在我的实际案例中可能会阻止此操作。然而，我可能不得不对

nth-child（）

执行类似的操作。这假设

p:first child

始终包含假标题。不确定它是否成立，特别是在“元素只有一个元素子元素，而元素有文本和元素子元素”的上下文中。希望它始终是第一个子元素；难道你不接受一个五年前的问题，部分地复制投票率最高的答案吗？此外，你还包括了问题中明确不允许的第2版。不是真的，我添加了额外的内容。我解释了“：only child”选择器的用法，阐明了第一种方法无法正常工作的原因。此外，我添加了简单的HTML和CSS代码，供那些会考虑如何以更好的方式重写此代码而不是两次使用“strong”元素的人使用。

p:nth-child(1){
}

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

.red{
  color:red;
}

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

.red{
  color:red;
}