​【CSS技巧】 :not()选择器实现跨层级排除

在CSS的世界里，:not()伪类是一个强大但常被低估的选择器。大多数开发者只把它用于过滤同级元素，但实际上它的能力远不止于此。最近我在工作中遇到了一个有趣的问题，让我深刻体会到了:not()选择器的跨层级选择能力。

问题场景

<div class="post">
    <p>Lorem ipsum dolor sit amet, sed alia expetenda liberavisse ut, id sit purto possim expetenda. In atqui aeque mandamus vis, sonet tamquam id his. Ne tota nobis his, eam tale sumo ut. Id odio ludus pro, sit ut autem ubique, no agam nemore pertinax per. Solum reque forensibus ius eu, an vix probo verear.</p>
    <p>Lorem ipsum dolor sit amet, sed alia expetenda liberavisse ut, id sit purto possim expetenda. In atqui aeque mandamus vis, sonet tamquam id his. Ne tota nobis his, eam tale sumo ut. Id odio ludus pro, sit ut autem ubique, no agam nemore pertinax per. Solum reque forensibus ius eu, an vix probo verear.</p>
    <p>Lorem ipsum dolor sit amet, sed alia expetenda <code>div .item</code> ut, id sit purto possim expetenda. In atqui aeque mandamus vis, sonet tamquam id his. Ne tota nobis his, eam tale sumo ut. Id odio ludus pro, sit ut autem ubique, no agam nemore pertinax per. Solum reque forensibus ius eu, an vix probo verear.</p>
    <p>Lorem ipsum dolor sit amet, sed alia expetenda liberavisse ut, id sit purto possim expetenda. In atqui aeque mandamus vis, sonet tamquam id his. Ne tota nobis his, eam tale sumo ut. Id odio ludus pro, sit ut autem ubique, no agam nemore pertinax per. Solum reque forensibus ius eu, an vix probo verear.</p>
    <p>Lorem ipsum dolor sit amet, sed alia expetenda liberavisse ut, id sit purto possim expetenda. In atqui aeque mandamus vis, sonet tamquam id his. Ne tota nobis his, eam tale sumo ut. Id odio ludus pro, sit ut autem ubique, no agam nemore pertinax per. Solum reque forensibus ius eu, an vix probo verear.</p>

    <p>
        <pre>
            <code>
                :root {
                --theme-color: #ffe4c4;
                --flex-list-col-num: 5;
                --flex-list-column-gap: 1em;
                --flex-width: calc((100% - var(--flex-list-column-gap) * (var(--flex-list-col-num) - 1)) / var(--flex-list-col-num));
                }
                
                #app {
                padding: 20px;
                }
            </code>
        </pre>
    </p>

</div>

以上结构中post里的内容做为wordpress投稿的内容，我们无法对其进行过多干预，在这种情况下，我们想要对<code>元素添加背景色，但要排除那些被<pre>包裹的<code>元素。也就是说，我们只想样式化段落中的内联代码，而不影响代码块中的样式。

传统思路的局限性

初看这个问题，可能会尝试以下几种方法：

1. 直接选择器：.post code - 这会选中所有code元素，不符合要求

2. 相邻兄弟选择器：无法解决跨层级的问题

3. 父选择器：CSS目前没有父选择器

:not()的跨层级解决方案

通过深入研究，我发现:not()选择器可以完美解决这个问题：

code:not(pre code) {
    background-color: red;
}

这个选择器的意思是："选择所有code元素，但不选择那些是pre元素子代的code元素"。

为什么这个方案有效

:not()伪类的强大之处在于它接受一个完整的复杂选择器作为参数，而不仅限于简单的类或ID选择器。这意味着我们可以：

1. 在:not()中使用后代选择器（空格）

2. 在:not()中使用子选择器（>）

3. 在:not()中使用各种复杂的选择器组合

这种能力打破了我们通常认为的"CSS选择器只能向下选择"的限制，通过反向排除实现了类似"向上选择"的效果。

扩展应用

这个技巧可以应用于多种场景：

1. 选择不在特定容器内的元素

2. 排除具有特定祖先的元素

3. 实现更精确的样式控制而不需要添加额外的类

4. 导航菜单特殊项处理

总结

:not()伪类的这种用法展示了CSS选择器的灵活性和强大功能。通过创造性使用CSS已有的特性，我们经常能找到解决看似复杂问题的简单方案。

下次遇到需要"向上选择"或"排除特定结构"的样式问题时，不妨试试:not()选择器的这种用法，它可能会给你带来惊喜。