CSS样式只有一个类

Question

使用Zurb的基础，我正在尝试将自己的样式添加到导航栏，这很有效。不幸的是，当观察容器变小时，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样式的宽度。