css - CSS样式只有一个类

Question

使用 Zurb 的 Foundation，我正在尝试将自己的样式添加到导航栏，效果很好。不幸的是，当查看容器变小时，Zurb 的响应式导航栏会改变其外观。当它这样做时，它会向 nav 元素添加第二个类。

在响应更改之前：

<nav class="top-bar">

响应式更改后：

<nav class="top-bar expanded">

对于这个扩展的导航栏，我的自定义样式看起来很糟糕，我想知道是否有一种方法可以仅在元素仅包含 1 个类而不包含多个类时应用样式。我知道只在一个元素有两个或多个类时应用样式很容易，但是你能排除一个吗？

谢谢！

Answer 1

您可以将此选择器用于您在 css 中的样式：

.top-bar:not(.expanded){
//your style

}

Answer 2

一种选择是在仅将它们应用到最小屏幕宽度top-bar的规则中应用这些样式。@media这个最小宽度当然是expanded样式开始的宽度。