带有 :not 选择器的 CSS 在作为 jquery 选择器放置时工作，而不是纯 CSS [重复]

Posted 2023-03-06

【中文标题】带有 :not 选择器的 CSS 在作为 jquery 选择器放置时工作，而不是纯 CSS [重复]

【英文标题】：CSS with :not selector working when placed inside as jquery selector, not with pure CSS [duplicate]

【发布时间】：2012-10-26 11:07:08

【问题描述】：

可能重复：What’s the difference in the :not() selector between jQuery and CSS?

如何为 class 'ui-content' 编写 CSS 选择器。但它不应该是 id 'ui-container'?

的孩子

我尝试在 CSS 中使用以下选择器。

.ui-content:not(#ui-container > .ui-content) 
    //styles goes here

但它确实可以在 jquery 中像 $('.ui-content:not(#ui-container > .ui-content)') 一样工作，但在纯 CSS 中却不行。

如何更正这个 CSS 选择器？

是否所有使用 jquery 的选择器都不适用于纯 CSS 选择器？

【参考方案1】：

这很简单：

:not(#ui-container) > .ui-content
   // style
 

您只需要确保没有其他类可以符合不是 #ui-container 并且仍然是 .ui-content 的直接父级。

【讨论】：

是的，你是对的。选择器运行良好。

这在我上面链接的重复问题中得到了解释。

【参考方案2】：

如果你想支持 IE8 或更低版本，你不能在 CSS 中使用这样的逻辑，因为你实际上是在 DOM 上查看 CSS 无法做到的父元素。

另一种方法是将全局样式应用于所有.ui-content 元素，然后使用更具体的选择器来覆盖容器内元素的该样式，例如#ui-container .ui-content。试试这个：

.ui-content 
    color: #C00;    /* Dark red */


#ui-container .ui-content 
    color: #CCC;    /* Grey */

【讨论】：

@JustinJohn 那一定很好。我羡慕你:)

这与IE8支持无关。

从某种意义上说，:not 选择器在任何情况下都不起作用

我的意思是你的第一句话没有任何意义。如果 CSS 作为一门语言首先不支持某些东西，那么 IE8 支持有什么关系？