小编2C-*_*C-B的帖子

CSS 通用同级组合器 (~) 不适用于否定伪类 (:not)

我有一个联系人列表,它生成为一个无序列表,其中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>
Run Code Online (Sandbox Code Playgroud)

示例 CSS:

li:not([data-name="a"] ~ [data-name="a"]):before { ... }
Run Code Online (Sandbox Code Playgroud)

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

一般的兄弟组合器本身就可以正常工作,否定伪类也是如此,只有当它们组合在一起时才不会发生任何事情。

这也不起作用:

li:not(li[data-name="a"] ~ li[data-name="a"]):before { ... }
Run Code Online (Sandbox Code Playgroud)

css

4
推荐指数
1
解决办法
2389
查看次数

标签 统计

css ×1