我需要用某个css类来设计最后一个HTML元素的样式,但是我必须考虑某些约束。
在我工作的网站中,导航菜单由几个嵌套列表组成,当点击一个元素时,带有页面名称的li
元素将获得.active类,如果它属于嵌套列表,则上面所有的父li
元素也将获得.active
类。
我希望能够与类.active
的最后li
元素的样式,因为它对应于当前打开的网页。
列表元素的配置可以是任何配置,所以我需要一些可以处理不同缩进或元素数量的东西。
我正在使用Omeka的内容管理系统,这意味着我不能使用javascript或修改HTML文件,所以我正在寻找一个纯CSS的解决方案。
以下是菜单结构的示例:
<ul class="">
<li >
<a href="">Introduction</a>
</li>
<li>
<a href="">level 1</a>
<ul>
<li>
<a href="">subpage</a>
<ul>
<li>
<a href="">sub-subpage</a>
<ul>
<li>
<a href="">sub-sub-subpage-a</a>
</li>
<li>
<a href="">sub-sub-subpage-b</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
下面是我在“子-子-页-b”页面时情况:
<ul class="">
<li >
<a href="">Introduction</a>
</li>
<li class="active">
<a href="">level 1</a>
<ul>
<li class="active">
<a href="">subpage</a>
<ul>
<li class="active">
<a href="">sub-subpage</a>
<ul>
<li>
<a href="">sub-sub-subpage-a</a>
</li>
<li class="active">
<a href="">sub-sub-subpage-b</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
我尝试使用li.active:last-of-type
,但它只选择类型为li
的最后一个元素
我还尝试用途:
.active > a:only-child{
color: red
}
但是只有当我想要选择的元素是唯一的子元素时,它才起作用。
1条答案
按热度按时间l7wslrjt1#
你可以通过使用CSS:has来获得某种方式,但请注意,目前这是在Firefox上的一个标志后面。