时间戳

首页 > 解决方案 > :not() 中的两个类似乎在 Safari 中不起作用，但在 Firefox 和 Chrome 中起作用

css - :not() 中的两个类似乎在 Safari 中不起作用，但在 Firefox 和 Chrome 中起作用

问题描述

我正在使用这个片段，它适用于 Firefox 和 Chrome，但不适用于 Safari。为什么？

.column:not(.custom.no-edit)

如果我将其更改为此它似乎可以工作，但这不会产生相同的效果吗？如果我的想法是正确的，如果两个类都存在，第一个会给出 true，而如果有任何类都存在，第二个会给出 true？

.column:not(.custom):not(.no-edit)

标签： csscss-selectors

解决方案

考虑以下 HTML 片段：

<div class="column"></div>
<div class="column custom"></div>
<div class="column no-edit"></div>
<div class="column custom no-edit"></div>

选择器

.column:not(.custom.no-edit)

是第 4 级语法，它匹配.column属性中没有“自定义”和“无编辑”的元素class。这意味着.column具有一个或另一个的元素将匹配。片段中的所有前三个元素都将匹配——只有第四个不匹配。

在第 3 级实现中，语法被视为无效并被忽略，导致片段中没有任何元素与选择器匹配。

Firefox 和 Chrome 理解的 3 级等效项是

.column:not(.custom), .column:not(.no-edit)

选择器

.column:not(.custom):not(.no-edit)

是 3 级语法，匹配.column属性中没有“自定义”或“无编辑”的元素class。只有片段中的第一个元素会匹配这个选择器。4级等效是

.column:not(.custom, .no-edit)

希望这可以帮助您了解您期望的结果和您实际获得的结果。

也可以看看：

推荐阅读