CSS 选择按类在顶部 div 中给出(引导 4 导航栏)

Question

我正在使用引导导航栏，并希望在正常的折叠模式下设置li元素的样式，但我找不到正确的方法...我所有的尝试都以相同或没有的风格结束：-(

这是正常的 html 输出：

<nav class="navbar navbar-expand-md" role="navigation">
<div class="container">

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#womo-navbar" aria-controls="womo-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="womo-navbar" class="navbar-collapse justify-content-md-center collapse" style="">
<ul id="menu-menu-1" class="nav navbar-nav">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-26 nav-item"><a title="Startseite" href="http://localhost/" class="nav-link" aria-current="page">Startseite</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-27 nav-item"><a title="Activity" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-27">Activity</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-27" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44 nav-item"><a title="adadasdad" href="http://localhost/?page_id=42" class="dropdown-item">adadasdad</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28 nav-item"><a title="Beispiel-Seite" href="http://localhost/?page_id=2" class="nav-link">Beispiel-Seite</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29 nav-item"><a title="Members" href="http://localhost/?page_id=6" class="nav-link">Members</a></li>
</ul>
</div>    
</div>
</nav>

这是折叠的 html：

<nav class="navbar navbar-expand-md" role="navigation">
<div class="container">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#womo-navbar" aria-controls="womo-navbar" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="womo-navbar" class="navbar-collapse justify-content-md-center collapse show" style="">
<ul id="menu-menu-1" class="nav navbar-nav">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-26 nav-item"><a title="Startseite" href="http://localhost/" class="nav-link" aria-current="page">Startseite</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-27 nav-item"><a title="Activity" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-27">Activity</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-27" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44 nav-item"><a title="adadasdad" href="http://localhost/?page_id=42" class="dropdown-item">adadasdad</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28 nav-item"><a title="Beispiel-Seite" href="http://localhost/?page_id=2" class="nav-link">Beispiel-Seite</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29 nav-item"><a title="Members" href="http://localhost/?page_id=6" class="nav-link">Members</a></li>    
</ul>
</div>
</div>
</nav>

唯一的区别是 womo-navbardiv 中的显示类：

正常：

<div id="womo-navbar" class="navbar-collapse justify-content-md-center collapse" style="">

倒塌：

<div id="womo-navbar" class="navbar-collapse justify-content-md-center collapse show" style="">

因此，我想以两种不同的方式设置 li 样式，具体取决于 womo-navbar 中的显示类是否存在。

对不起，我的英语不好

谢谢！

Answer 1

你可以做这样的事情：

#womo-navbar.show ul>li.nav-item{
//your style
}

这只会影响导航栏中具有 show 类的li。