Question

我正在使用一些CSS，并想知道为什么以下部分不起作用：

.container:not(#topic-title>.container)

除此之外我还能做到同样的事情吗？我对JavaScript解决方案持开放态度。

Answer 1

您可以使用此选择器：

:not(#topic-title) > .container

.container {
    height:20px;
}
:not(#topic-title) > .container {
    background:green;
}

<div id="topic-title">
    <div class="container">parent #topic-title</div>
</div>
<div>
    <div class="container"> parent not #topic-title</div>
</div>

Answer 2

请查看the spec :not伪类:(粗体是我的）

否定伪类:not(X)是一个功能符号 a 简单选择器（不包括否定伪类本身）作为参数。

其中

A simple selector is either a type selector, universal selector, 
attribute selector, class selector, ID selector, or pseudo-class.

因此#a>.b不是简单的选择器，这就是选择器.b:not(#a>.b)不起作用的原因。

Answer 3

以下是background-color的示例，margin示例类似。想法：在页面范围内设置默认值，然后取消您不想要的实例。

＆＃13;

.container {
  background-color: red;
}
#topic-title > .container {
  background-color: inherit;
}

＆＃13;

<div>
  <div id="topic-title">
    <div class="container">A</div>
  </div> 
  <div class="container">B</div>
</div>
<div class="container">C</div>

＆＃13;

为什么.b：not（#a＆gt; .b）不起作用？

3 个答案: