当一个类存在而不是两个类时，Css选择器

Question

我想做这样的事情.horizontal-nav:not(.horizontal-nav.responsive-nav-enabled)

即。我想仅在div没有.horizontal-nav类时应用.responsive-nav-enabled的样式。如果它有两个类，那么.horizontal-nav的样式不能适用。有可能吗？

Answer 1

您需要使用.horizontal-nav:not(.responsive-nav-enabled)来获得所需的结果：

＆＃13;

＆＃13;

.horizontal-nav {
  height: 20px;
  border: thin solid;
}

.horizontal-nav:not(.responsive-nav-enabled) {
  background-color: red;
}

＆＃13;

<div class='horizontal-nav'></div>
<div class='horizontal-nav responsive-nav-enabled'></div>

＆＃13;

＆＃13;

＆＃13;

原始选择器的问题在于它无效并被浏览器拒绝。 :not接受simple selector，而.horizontal-nav.responsive-nav-enabled是一系列简单的选择器。