为什么我的 CSS `:not()` 选择器失败，如何修复？

为什么 :not() 选择器在 CSS 中失败

尽管 jQuery 的 :not() 选择器声称符合 CSS3，但它与标准有很大不同CSS 中的 :not() 选择器。

jQuery扩展

虽然标准 :not() 只接受单个简单选择器作为参数，但 jQuery 允许任意选择器，包括逗号分隔的选择器列表。

CSS 限制

相比之下，标准 :not() 有严格的限制限制：

• 无法传递逗号分隔的选择器
• 无法将简单选择器组合成复合选择器
• 无法使用组合器（例如空格）

原因失败

在给定的场景中，CSS 修改尝试复制 jQuery 的 :not() 行为，由于以下原因，该行为不是有效的 CSS：

• 除以不允许使用逗号（例如 :not(.alpha, .beta, .gamma)）。
• 传递复合词选择器（例如，body > div）在 :not() 中无效。

纯 CSS 解决方法

要在纯 CSS 中实现所需的结果，有必要链接多个 :not() 选择器：

#sectors > div:not(.alpha):not(.beta):not(.gamma)

但是，这种方法是比 jQuery 的扩展 :not() 语法更容易出错且不一致。

未来发展

选择器 4 增强了 :not() 以接受逗号分隔的列表复杂的选择器，这将使其与 jQuery 保持一致，并使其在未来更加通用。

以上是为什么我的 CSS `:not()` 选择器失败，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！