Question

我不明白为什么以下代码没有预期的行为：

＆＃13;

    .toggle {
      color: red;
    }
    
    :not(.list) .toggle {
      font-weight:bold;
    }

＆＃13;

  <div class="container">
      <a href="#!" class="toggle">Toggle</a>
      <ul class="list">
        <li><a href="#!">Link 1</a></li>
        <li>
          <div class="container">
            <a href="#!" class="toggle">SubToggle</a>
            <ul class="list">
              <li><a href="#!">SubLink 1</a></li>
              <li>
                <a href="#!">SubLink 2</a>
              </li>
              <li><a href="#!">SubLink 3</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#!">Link 3</a></li>
      </ul>
    </div>

＆＃13;

我认为使用:not()会导致应用＆＃34;粗体＆＃34;只有主要＆＃34; Toggle＆＃34;链接，但它applis＆＃34;粗体＆＃34;对所有红色的。为什么呢？

请注意，此代码嵌套了相同的类名，我不希望使用不同的css类来定位特定级别，我想仅使用后代选择器和其他运算符来定位元素

此处还有jsFiddle直接尝试。

Answer 1

我想你可能想要这个：

.toggle {
  color: red;
  font-weight: bold;
}

div *:not(.list) .toggle {
  font-weight: normal;
}

Answer 2

：不不支持CSS组合器。

您唯一的方法是：

.toggle {
  color: red;
}

.toggle {
  font-weight:bold;
}

.list .toggle {
  /* Override previous */
}

Fiddle

Answer 3

我尝试了很多次，但这是我能做的唯一方法：

.toggle {
  color: red;
  font-weight:bold;
}

.list .toggle{
  //override
  font-weight:normal;
}

这是如何使用：不正确的方式：为您specialToggle

的元素添加do not want to select

<a href="#!" class="toggle specialToggle">SubToggle</a>

然后是css：

.toggle {
  color: red;
}

.toggle:not(.specialToggle) {
  font-weight:bold;
}

https://jsfiddle.net/s249tyur/3/

Answer 4

如果结构始终相同，则可以尝试使用大于号（＆gt;），这意味着只将样式应用于类的直接子项。

.container > .toggle {
  font-weight:bold;
}

或者，如果容器并不总是具有相同的类，但始终是div元素，您可以使用：

div > .toggle {
  font-weight:bold;
}

如果选择器不是特定元素的子元素，那么如何定位选择器（只有当它是根的时候）

4 个答案: