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

一种解决方法可能是使用: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>

Answer 2

从本质上讲，你问的是文本是否会影响dom元素的样式，答案是 - 不，因为文本不是它自己的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

如果出于某种奇怪的原因，您可以仅支持Gecko，则可以使用-moz-first-node选择器来完成此操作。

https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-first-node

Answer 4

这是2017年。答案是＆＃34;否＆＃34;。没有这样的CSS选择器可以帮助你解决这个问题。

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

4 个答案: