CSS with：当作为jquery选择器放入内部时，不是选择器工作，而不是纯CSS

Question

  

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

如何为类 '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中使用这样的逻辑，因为你实际上是在查看一个CSS不能做的父元素。

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

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

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