CSS选择器问题：能否仅在元素含指定类且不含另一类时应用样式

嗨，这个需求完全没问题，你想的思路是对的，甚至可以把选择器写得更简洁些。

你要的效果是：只有当元素包含.horizontal-nav类，但同时不包含.responsive-nav-enabled类时，才应用对应的样式；如果两个类都有，就跳过。CSS的:not()否定伪类正好是干这个的。

你写的.horizontal-nav:not(.horizontal-nav.responsive-nav-enabled)其实是有效的，但可以简化成更清爽的写法：

.horizontal-nav:not(.responsive-nav-enabled) {
  /* 这里写你要应用的样式 */
  display: flex;
  gap: 1rem;
  /* 其他样式属性... */
}

因为我们已经用.horizontal-nav选中了目标元素，:not()里只需要检查它有没有.responsive-nav-enabled类就够了，不用重复写.horizontal-nav。

举个实际场景的例子：

• 如果元素是 <div class="horizontal-nav">，这个选择器会匹配它，样式正常生效；
• 如果元素是 <div class="horizontal-nav responsive-nav-enabled">，:not(.responsive-nav-enabled)会直接排除它，样式就不会被应用。

另外放心，:not()伪类在所有现代浏览器（Chrome、Firefox、Edge、Safari 9及以上）都支持，兼容性完全没问题。

内容的提问来源于stack exchange，提问作者Junaid Anwar