是否有第一个孩子的CSS选择器，考虑到文本节点？

Question

我试图为第一个孩子的元素找到一个CSS选择器，将任何可能出现在它之前的文本节点都考虑在内（例如，如果之前有任何元素出现，可能是未包装的文本节点，则不再将其视为第一个孩子）。

但似乎:first-child不包括文本节点，同样没有:nth-child等

这是我在哪里，但它不工作：

.red-if-not-first { 
 
    color: red; 
 
    font-weight: bold; 
 
} 
 

 
.red-if-not-first:first-child { 
 
    color: green; 
 
}

<p> 
 
    Lorem ipsum. <span class="red-if-not-first">This should be red, not green, because some content comes before it.</span> Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti! 
 
</p> 
 

 
<p> 
 
    <span class="red-if-not-first">This is rightly green, not red, because it's first bit of content in this paragraph.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti! 
 
</p>

不幸的是，我对标记无法控制。

我知道这已经是asked before，但那是3年前，这在前端已经有好几千年了！

Answer 1

这是2017年。答案是“否”。没有这样的CSS选择器可以帮助你做到这一点。

Answer 2

从本质上讲，你问的是文本是否会影响dom元素的样式，答案是 - 否，因为文本不是它自己的dom元素。

我们可以用一个简单的实验来证明这一点。只需在段落的开头添加一个标记元素，然后使用兄弟选择器来覆盖颜色。你会发现这两种情况都适用，因为文本对周围的流量没有影响。

为了记录，我认为我是通过最初使用::before伪元素进行标记实验的，但它们不能与兄弟选择器一起使用。伪元素不是真正的元素，并且不会影响实际的dom树的关系。

.red-if-not-first { 
 
    color: red; 
 
    font-weight: bold; 
 
} 
 

 
.red-if-not-first:first-child { 
 
    color: green; 
 
} 
 

 
.marker + span{ 
 
    color: red; 
 
}

<p> 
 
    <i class="marker"></i> 
 
    Lorem ipsum. <span class="red-if-not-first">This should be red, not green, because some content comes before it.</span> Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti! 
 
</p> 
 

 
<p> 
 
    <i class="marker"></i> 
 
    <span class="red-if-not-first">This is rightly green, not red, because it's first bit of content in this paragraph.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti! 
 
</p>

Answer 3

一个解决办法可能是利用:empty伪类。你将需要更多的标记。

p .red-if-not-first { 
 
    color: red; 
 
    font-weight: bold; 
 
} 
 

 
p > :empty + .red-if-not-first { 
 
    color: green; 
 
}

<p> 
 
    <span>Lorem ipsum.</span> <span class="red-if-not-first">This should be red, not green, because some content comes before it.</span> Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti! 
 
</p> 
 

 
<p> 
 
    <span></span> <span class="red-if-not-first">This is rightly green, not red, because it's first bit of content in this paragraph.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti! 
 
</p>