Question

我试图弄清楚为什么not选择器不起作用。这是我的代码：

CSS ：

#full-content, #mobile-content {
    display: none;
}

.collapsed .make #mobile-content {
     display: block;
}
.content:not(.collapsed) .make #full-content {
     display: block;
}

HTML ：

<div class="content">
     <div class="content collapsed">
         <div id="car">
              <div class="make">
                  <div id="full-content">
                       full content
                  </div>
                  <div id="mobile-content">
                       mobile content
                  </div>
             </div>
         </div>
     </div>
</div>

我试图隐藏全内容div。正如您所看到的，.content:not(.collapsed)不是要匹配任何div，而是匹配全内容div。如何隐藏全内容div。我不确定会有多少.content个父母。如果扩展菜单，折叠的类可能会消失。

Answer 1

:not()选择器按预期工作。问题是您的包装器div的类content没有collapsed，然后您有一个类collapsed的类。删除第一个div使其按预期工作。

http://jsfiddle.net/3L7ym/

<div class="content collapsed">
     <div id="car">
          <div class="make">
              <div id="full-content">
                   full content
              </div>
              <div id="mobile-content">
                   mobile content
              </div>
         </div>
     </div>
 </div>

Answer 2

假设您正在寻找关键.collapsed并且您无法提前知道您将拥有多少.content个容器，您可以通过删除:not选择器：

.collapsed #mobile-content {
     display: block;
}
.collapsed #full-content, #mobile-content {
     display: none;
}

<强> Fiddle here.

为什么：not selector不工作

2 个答案: