如何解决定位到特定的li标签以更改背景颜色和文本颜色
我希望定位li
中的最后一个ul
,以便仅更改特定的li
的{{1}}和color
即更改我要更改的特定background-color
的{{1}}和color
。此列表用于下拉菜单。
background-color
我想使用:
li
但这会突出显示列表二和列表三的底部<ul class="site-nav">
<li class=" ">
<a href="/" class="current">
<span>LIST ONE</span>
</a>
</li>
<li class="dropdown">
<a class="" href="/list-nav-two"><span>LIST TWO</span></a>
<ul class="site-nav-dropdown">
<li><a href="#" class=""><span>SERIES 1</span></a></li>
<li><a href="#" class=""><span>SERIES 2</span></a></li>
<li><a href="#" class=""><span>SERIES 3</span></a></li>
<li><a href="#" class=""> <span>SERIES 4</span></a> </li>
<li><a href="/current-equipment-list" class=""><span>THIS IS THE LI TO CHANGE</span></a></li>
</ul>
</li>
<li class="dropdown"><a class="menu__moblie" href="/list-nav-three"><span>LIST THREE</a>
<ul class="site-nav-dropdown">
<li><a href="#" class=""><span>SERIES 1</span></a></li>
<li><a href="#" class=""><span>SERIES 2</span></a></li>
<li><a href="#" class=""><span>SERIES 3</span></a></li>
<li><a href="#" class=""> <span>SERIES 4</span></a> </li>
</ul>
</li>
</ul>
解决方法
将选择器更改为此,以仅添加第二个子菜单中的最后一个li
:
ul.site-nav > li:nth-child(2) ul.site-nav-dropdown li:last-child a
background: red;
color: #fff;
}
ul.site-nav > li:nth-child(2) ul.site-nav-dropdown li:last-child a {
background: red;
color: #fff;
}
<ul class="site-nav">
<li class=" ">
<a href="/" class="current">
<span>LIST ONE</span>
</a>
</li>
<li class="dropdown">
<a class="" href="/list-nav-two"><span>LIST TWO</span></a>
<ul class="site-nav-dropdown">
<li><a href="#" class=""><span>SERIES 1</span></a></li>
<li><a href="#" class=""><span>SERIES 2</span></a></li>
<li><a href="#" class=""><span>SERIES 3</span></a></li>
<li>
<a href="#" class=""> <span>SERIES 4</span></a>
</li>
<li><a href="/current-equipment-list" class=""><span>THIS IS THE LI TO CHANGE</span></a></li>
</ul>
</li>
<li class="dropdown"><a class="menu__moblie" href="/list-nav-three"><span>LIST THREE</a>
<ul class="site-nav-dropdown">
<li><a href="#" class=""><span>SERIES 1</span></a></li>
<li><a href="#" class=""><span>SERIES 2</span></a></li>
<li><a href="#" class=""><span>SERIES 3</span></a></li>
<li>
<a href="#" class=""> <span>SERIES 4</span></a>
</li>
</ul>
</li>
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。