Question

我尝试只选择父元素没有某个类的元素。

所以给出：

<ul class="foo">
    <li class="one">one..</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>

<ul>
    <li class="one">one..</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>

和css：

:not(.foo) .one {
    color: red;
}

我希望只有一个'one'元素为红色。但两者都是。这是小提琴：http://jsfiddle.net/633fnovy/2/

Answer 1

您正在使用一个涉及嵌套子级的空间分隔符。

如果您考虑一下，所有.one元素都是body的子元素，例如，:not(.foo)

应用更多特异性

＆＃13;

ul:not(.foo) .one {
  color: red;
}

＆＃13;

<ul class="foo">
  <li class="one">one..</li>
  <li class="two">two</li>
  <li class="three">three</li>
</ul>

<ul>
  <li class="one">one..</li>
  <li class="two">two</li>
  <li class="three">three</li>
</ul>

＆＃13;

Answer 2

尝试添加直接后代选择器>：

＆＃13;

:not(.foo) > .one {
    color: red;
}

＆＃13;

<ul class="foo">
    <li class="one">one..</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>

<ul>
    <li class="one">one..</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>

＆＃13;

Answer 3

您的使用方式：

:not(.foo) .one {
    color: red;
}

类似：

*:not(.foo) .one {
    color: red;
}

您必须指定内容：

ul:not(.foo) .one {
    color: red;
}

<ul class="foo">
    <li class="one">one..</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>

<ul>
    <li class="one">one..</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>

：未选择不为父母工作

3 个答案: