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

Question

所以我在这里有我的(这里简化了) Bootstrap 导航栏。

<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;
}

问题是:.navbar >li >a 的 line-height 保持 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
}