html - 如何按内容选择列表项？

Question

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

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

我想要一个li包含empty的规则。我可以创建 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

几个月前我也问过类似的问题。看来你不能检查元素的内容，所以没有. 继续使用 javascript。