CSS：不是选择器行为[重复]

Question

使用 CSS，我试图定位 #include 元素内的所有 ul 元素，#exclude 元素内的元素除外。这是标记：

<div id="include">
  <ul><li>Include List</li></ul>
  <div id="exclude">
    <ul><li>Exclude List</li></ul>
  </div>
</div>

我想我可以像这样使用:not CSS 选择器来做到这一点：

#include :not(#exclude) ul {
  color: blue !important;
}

我看到的结果是ul 都没有得到蓝色。显然我误解了这个:not 选择器是如何工作的。我正在尝试做的事情可能吗？这是一个小提琴：

https://jsfiddle.net/flyingL123/gmpLgx4y/

Answer 1

您需要使用> 运算符。这将获取前面元素的直接子元素。这将得到ul 立即从#include 下降。更新：

JSFiddle

更新代码：

#include > ul {
    color: blue !important;
}

您将不能够通过继承来隐式设置样式。他们不排除祖先，因为他们没有涓涓细流。您需要为其他元素添加新规则，如下所示：

#include ul {
    color: blue;
}

#exclude ul {
    color: black;
}

小提琴：Here