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

问题描述

所以，我是一个新手，使用 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>

解决方法

这是CSS 选择器和特殊性...

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

来自 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