Question

我想在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，选择带有“Subcat 1”的li，对于样本2，不选择任何东西。

ul > li:nth-child(3)适用于示例1，但也会匹配示例2中的“Product”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>

Answer 2

这里的经典CSS方法，不使用:not（有时可能很棘手），首先给出一般规则，然后用特殊情况覆盖它。

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

我想要一个CSS选择器，

如果这很重要，您需要使用:not。

Answer 3

您可以使用:last-child选择器。所以它会是这样的：

ul >li:last-child {
    /* Your CSS */
}

More about :last-child

Answer 4

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

是否可以选择nth-child（x），但前提是它不是最后一个孩子？

4 个答案: