CSS元素child与带文本节点的child [英] CSS element child vs child with text node

问题描述

我有一个元素有一个子元素，另一个元素具有相同的子元素，但是还有一个文本节点:

I have an element that has a child and another element with the same child, but there is also a text node:

<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不同.

I do not have the ability to modify the DOM structure in any way, including no JavaScript. All I can do is edit CSS, but I want to style the inline strong differently than the strong that is the only child.

我认为这可能有效:

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

但是，两个项目都变成红色.

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

Is there a way to target child nodes that don't have text node siblings, using only CSS?

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

I don't think it can be done, but I figured I'd ask in case there is some sort of clever work-around.

推荐答案

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

As per my understanding I think it should be like

p:first-child
{
    color: red;
}

JSFiddle

这篇关于CSS元素child与带文本节点的child的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！