是否可以选择nth-child(x),但前提是它不是最后一个孩子？

Question

我想在a中选择第三个元素ul,只要它不是最后一个元素ul.

样本1:

<ul>
  <li>Home</li>
  <li>Cat 1</li>
  <li>Subcat 1</li>
  <li>Product</li>
</ul>

样本2:

<ul>
  <li>Home</li>
  <li>Cat 1</li>
  <li>Product</li>
</ul>

我想要一个CSS选择器,对于样本1,选择li带有"Subcat 1",对于样本2,不选择任何东西.

ul > li:nth-child(3) 将适用于样本1,但也将匹配样本2中的"产品"li,我不希望它这样做.

在这种情况下,我无法修改HTML.

Answer 1

你可以使用:nth-​​child:不能达到你所需要的.这是一个例子.

ul li:nth-child(3):not(:last-child) {
  color: red;
}

<ul class="sample1">
  <li>Home</li>
  <li>Cat 1</li>
  <li>Subcat 1</li>
  <li>Product</li>
</ul>


<ul class="sample2">
  <li>Home</li>
  <li>Cat 1</li>
  <li>Product</li>
</ul>