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

Question

给定以下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;
}

score 2 · Accepted Answer

首先，设置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>

score 1 · Accepted Answer

我找到了解决方案（！）：

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

其他解决方案：

header ul:first-of-type, header ul:last-of-type :first-child {
  display: none;
}

或者

header :first-child, header ul:last-of-type :first-child {
  display: none;
}

更新 (2020/04/18)

2 回答 2