CSS：不是选择器行为

Question

使用CSS，我试图定位ul元素中的所有#include元素，但#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