Question

我有一个联系人列表，该列表是作为无序列表生成的，其中HTML5 data属性分配给每个列表项。 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 { ... }

Answer 1

当其他所有方法都失败时，RTFM。我在W3选择器规范中找到了我的问题的答案：

否定伪类，不是（X），是一个功能符号 简单选择器（不包括否定伪类本身）作为参数。

和

一个简单的选择器是一个类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

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

链接：

Answer 2

虽然你已经回答了自己的问题，但你总是可以使用相邻兄弟组合来丢弃::before元素的data-name内容，其li[data-name="a"]::before { content: 'a'; /* etc... */ } li[data-name="a"] + li[data-name="a"]::before { content: ''; /* etc... */ }属性等于他们之前的兄弟（尽管它很笨拙，不幸的是）：

{{1}}

JS Fiddle demo

CSS通用兄弟组合子（〜）不使用否定伪类（：不）

2 个答案: