css选择器，仅用于将文本作为子项的元素

Question

我想要一个CSS选择器，它只会给我下面没有dom孩子的前3个<li>。 :empty不起作用，因为它的文字被视为儿童。

 <ul>
  <li>I want this one</li>
  <li>I want this one</li>
  <li>I want this one</li>
  <li><a href="...">Not this one</a></li>
  <li><a href="...">Not this one</a></li>
</ul>

Answer 1

作为一般规则，您不能这样做，因为您需要父选择器，但是......

...由于您只想定位文本，可以将:empty选择器与属性和伪元素结合使用

ul li:empty::after {
  content: attr(data-text);
  color: red;
  background: lightgray;
}

<ul>
  <li data-text="I want this one"></li>
  <li data-text="I want this one"></li>
  <li data-text="I want this one"></li>
  <li><a href="...">Not this one</a></li>
  <li><a href="...">Not this one</a></li>
</ul>