非直接父元素如何影响其非直接子元素？

【问题标题】：How a non-immediate parent can affect its non-immediate child elements?非直接父元素如何影响其非直接子元素？
【发布时间】：2021-09-21 04:05:33
【问题描述】：

所以，我是一个新手，使用 bootstrap v5 创建一个带有以下 Html 代码的导航栏。在这里，我的链接项目的直接父级（ul）有一个“navbar-nav”类，它将我的链接项目样式化为彼此叠放的堆栈。然后非直接类“navbar-expand-lg”将我的项目设置为彼此相邻。现在我很困惑这个非立即类如何影响我的项目以及引导 CSS 文件中提到的哪个属性。

<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav ">
    <li class="nav-item">
        <a class="nav-link" href="">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="">Services</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
    </li>
</ul>

【问题讨论】：

标签： html css bootstrap-5 css-specificity

【解决方案1】：

这是一个简单的CSS选择器和特异性...

Bootstrap 为 .navbar-expand-lg 提供了更具体的 CSS，这使得内部的 navbar-nav 更改为 flex-direction: row。这会覆盖 .navbar-nav 中的 flex-direction: column。

来自 Bootstrap 5 CSS...

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

Demo

【讨论】：