CSS 当缺少 HTML 元素时通过 :after / :before 添加内容的选择器

Question

我想用 CSS :before 选择器添加内容，以防未排序的 HTML 列表没有任何列表项。我不能使用 :empty，因为 ul 和 /ul 之间可能有白色 space（空格、换行符、制表符等）。

由于:blank 在大多数浏览器中还没有实现，我需要另一个解决方案。

这是一个例子：

// CSS
ul > li::before { content: 'abc'; }   /* how to negate this? */

// 'abc' should not show up
<ul>
  <li>xxx</li>
  <li>xxx</li>
</ul>

// 'abc' should show up
<ul>
</ul>

上面的 CSS 当未排序列表有子项时显示 'abc'。当未排序列表有 no 个子项时，我想显示 'abc'。所以我正在寻找 CSS 行的否定。

Answer 1

恐怕如果没有 :blank pseudo-class 的功能，这是不可能的。¹

在您的方案中只有两个可能的地方可以插入 ::before pseudo-element：ul 或 li。由于您只想在存在 no li 元素时插入生成的内容，因此您只剩下 ul.

虽然::before和::after分别插入元素的后代元素前后，you can't target them relative to those descendant elements with a sibling combinator和pseudo-element目前不支持结构pseudo-class是的。也就是说，换句话说，你不能说 "prevent ul::before from generating content in the presence of one or more li elements"，也不能将 :only-child pseudo-class 应用到 ul::before.

在可以使用:empty的情况下，就这么简单

ul:empty::before { content: 'abc'; }

但是由于您给出的原因不能使用 :empty，如果您真的无法阻止生成空格（例如，如果内容来自 WYSIWYG 编辑器或可能导致的其他一些转换在剩余的空格中）你必须添加一个 class 到任何没有子元素的 ul 元素。

¹ _{最近对 selectors-4 的修订提出了，但这同样是新的，需要实施者的合作。}

CSS 当缺少 HTML 元素时通过 :after / :before 添加内容的选择器

CSS Selector for adding content through :after / :before when HTML element is missing

html

css

css-selectors

pseudo-element