时间戳

首页 > 解决方案 > CSS - 仅显示第二个 ul 的最后一个 li

css - CSS - 仅显示第二个 ul 的最后一个 li

问题描述

给定以下html代码：

<header>
<ul>
<li>Text1a</li>
<li>Text2a</li>
</ul>
<ul>
<li>Text1b</li>
<li>Text2b</li>
</ul>
</header>

如何在不使用任何 id/class 的情况下仅显示第二个 ul (Text2b) 的最后一个 li？谢谢。

PS：我正在使用这个 css，但它不起作用：

header li:not(:last-child) {
  display: none;
}

标签： css

解决方案

首先，设置ul > li为display: none

其次，用于nth-of-type()从正确的 uland中进行选择li，并仅覆盖该display元素的属性

ul li {
  display: none;
}

ul:nth-of-type(2) li:nth-of-type(2) {
  display: block;
}
<header>
  <ul>
    <li>Text1a</li>
    <li>Text2a</li>
  </ul>
  <ul>
    <li>Text1b</li>
    <li>Text2b</li>
  </ul>
</header>

推荐阅读