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

【问题标题】：CSS with :not selector working when placed inside as jquery selector, not with pure CSS [duplicate]带有 :not 选择器的 CSS 在作为 jquery 选择器放置时工作，而不是纯 CSS [重复]
【发布时间】：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 选择器？

【问题讨论】：

标签： jquery css jquery-selectors css-selectors

【解决方案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 支持有什么关系？