css - CSS 通用兄弟组合符 (~) 不适用于否定伪类 (:not)

Question

我有一个联系人列表，它生成为一个无序列表，并data为每个列表项分配了 HTML5 属性。属性的值是data用于按字母顺序排列的单个字母。我无法控制生成的标记，但我需要在每个字母的第一个条目之前插入一个节标题。我希望用:before伪元素来实现这一点。没有什么不寻常的。我选择的 CSS 选择器有很大的自由度，因为这个项目只支持 IE9+。

示例标记：

<ul>
    <li data-name="a"> ... </li>
    <li data-name="a"> ... </li>
    <li data-name="a"> ... </li>

    <li data-name="z"> ... </li>
    <li data-name="z"> ... </li>
    <li data-name="z"> ... </li>
</ul>

示例 CSS：

li:not([data-name="a"] ~ [data-name="a"]):before { ... }

不幸的是，这个选择器不起作用，我不完全确定为什么不这样做，因为如果我把它分成几个部分，一切都只是花花公子。

一般的兄弟组合器本身就可以正常工作，否定伪类也是如此，只是当它们组合在一起时，什么都不会发生。

这也不起作用：

li:not(li[data-name="a"] ~ li[data-name="a"]):before { ... }

score 6 · Accepted Answer

当一切都失败时，RTFM。我在 W3 选择器规范中找到了我的问题的答案：

否定伪类 :not(X) 是一个以 简单选择器（不包括否定伪类本身）作为参数的函数式表示法。

和

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。

换句话说，它不起作用，因为它不应该起作用。通用兄弟组合器不是一个简单的选择器，因此它不能与否定伪类一起使用。

链接：

score 2 · Accepted Answer

虽然您已经回答了自己的问题，但您始终可以使用相邻兄弟组合器来丢弃属性等于其先前兄弟::before的元素的内容（尽管它更笨拙，不幸的是）：data-name

li[data-name="a"]::before {
    content: 'a'; /* etc... */
}

li[data-name="a"] + li[data-name="a"]::before {
    content: ''; /* etc... */
}

JS 小提琴演示。

css - CSS 通用兄弟组合符 (~) 不适用于否定伪类 (:not)

2 回答 2

Related

Reference