当同一元素上存在特定类时，如何修改类？

Question

所以我在这里有我的（在这里简化了）bootstrap navbar。

<nav class="navbar">
    <ul class="navbar-nav">
        <li><a href="#">foo</a></li>
    </ul>
</nav>

.navbar-fixed-top {
  height: 100px;
}
.navbar-nav >li >a {
  line-height: 100px
}

我只想在将类.shrink添加到nav时缩小navbar 。 非常简单，只需将以下内容添加到我的CSS中：

.shrink {
    height: 80px;
}

问题是：该line-height的.navbar >li >a保持100px -有没有办法我只能与CSS的影响呢？

Answer 1

大概是这样吗？

.navbar {
  height: 100px;
}

.navbar.shrink {
  height: 80px
}

.navbar > .navbar-nav > li > a {
  line-height: 100px
}

.navbar.shrink > .navbar-nav > li > a {
  line-height: 80px
}

Answer 2

您可以尝试：

.shrink a {
    line-height: <whatever>;
}

这会将您想要的样式应用于带有缩小类的元素中包含的元素。