如何按内容选择列表项？

Question

我想知道如何通过其内容为列表元素编写CSS规则：

<ul id="myList">
  <li>first item</li>
  <li>empty</li>
  <li>second item</li>
  ...
</ul>

我希望li包含空的规则。我可以创建javascript嗅探childNodes的innerHTML，但我想知道是否有一个简单的CSS解决方案？

谢谢。

Answer 1

CSS中没有像文本选择器那样的东西，CSS不是一种编程语言，它不知道元素内部是什么，这就是JavaScript和jQuery的用武之地。

您可以使用jQuery :contains()选择器（是的，我知道您想要CSS，但这不可能）

如果您没有按字面意思使用单词empty，并且如果您指的是空元素，那么您可以使用:empty选择器来选择空的元素

Answer 2

您可以使用:empty选择器。它匹配每个没有子元素的元素（包括文本节点）。

p:empty {
  /* p tags that are empty */
}

Mozilla文档：https://developer.mozilla.org/en-US/docs/CSS/:empty

  

：empty伪类表示任何没有子元素的元素。仅考虑元素节点和文本（包括空格）。注释或处理指令不会影响元素是否为空。

Answer 3

几个月前我问过similar question。看来你无法检查元素的内容，所以没有。继续使用javascript。