本文的标题是如何写出让别人看不懂的选择器，但是本意不是希望大家去写如此复杂的选择，一些复杂（怪异）的选择器在一些特定场景下也许有着妙用，又或者写出这种选择器是基于当时的特殊背景。
通过这些案例，我们窥见一些 CSS 选择器的有意思之处。从中得到一些有益经验。
五花八门的伪类叠加
首先来看第一类，在单个选择器中，叠加各种伪元素。
像是这个：
a:not(main *:not(:is(h2, h3) > *)) {
color: red;
}
这个选择器不认真看个一分钟根本不知道它到底是个啥。（认真看也不一定知道...）
它混入了比较新的两个伪类选择器
:not()：用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）:is()：将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。
当然，对于它的拆解：
a:not(main *)：选择不是<main>标签下的所有 a 标签main *:not(:is(h2, h3) > *)：选择<main>标签下所有不是<h2>、<h3>子元素的元素
所以合起来就是：选择所有不是 <main> 标签下的 <a> 标签以及所有 <main> 下面不是 <h2>、<h3> 下的子 <a> 以外的所有 <a> 标签。
假设有如下 HTML
<main>
<a href="">main>a</a>
<h1><a href="">main>h1>a</a></h1>
<h2><a href="">main>h2>a</a></h2>
<h2><p><a href="">main>h2>p>a</a></p></h2>
<h3><a href="">main>h3>a</a></h3>
</main>
<h1><a href="">h1>a</a></h1>
<h2><a href="">h2>a</a></h2>
<h3><a href="">h3>a</a></h3>
<a href="">a</a>
结果如下：
对于这个 CSS 选择器，是可以通过正常写法还原的，只是代码量稍微多一点点，正常而言，还是不建议写这么复杂的选择器。
这里仅仅是一个例子，多层不同的伪类嵌套，对于代码可读性是灾难性的。
神奇的特殊字符
好了，某天你又碰到了这样一个选择器：
#~!@$%^&*()_+-=,./';:?><\[]{}|`# {
color: red;
}
Oh My God。我想你的第一反应一定是这个选择器真能生效？
不好意思，它还真能生效，CSS 中的 CSS 类名中允许使用除 NUL 之外的任何字符。
感兴趣可以看看这个：Which characters are valid in CSS class names/selectors?
所以，上述的选择器，是可以匹配这样的标签的：
<div id="~!@$%^&*()_+-=,./';:?><[]{}|`#">Lorem</div>
当然，既然如此，我们还可以写出这样的选择器：
<div id="
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
相关课程
客服
