考虑到文本节点，第一个子元素有CSS选择器吗？

我正在尝试为第一个子元素找到一个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年前的事了，这在前端已经有一千年了！

转载请注明出处:http://www.bqysc.com/article/20230526/1503304.html

相关阅读