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

Question

可能重复：
jQuery 和 CSS 之间的 :not() 选择器有什么区别？

如何为类 '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 选择器？

Answer 1

这很简单：

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

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

Answer 2

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

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

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

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