html - CSS伪类选择不起作用

Question

我有以下 HTML 结构:

<ol>
    <li><a id="a" href="#">Not this</a></li>
    <li><a id="b" href="#">Not this</a></li>
    <li><a id="c" href="#">This one</a></li>
    <li class="active"><span>Not this</span></li>
</ol>

我想通过 CSS 选择#c。我试过:

ol > li:not(.active):last-child > a {
  border: 1px solid green;
}

据我了解，li:not(.active) 选择所有 li 元素，但选择类为 .active 的元素。

在此选择中，我使用 :last-child 获取这些 li 元素中的最后一个。但这行不通。怎么了？有可能实现我想要实现的目标吗？

非常感谢:)

PS:列表长度是动态的，元素没有任何可用于 CSS 选择的 id(我只是在示例中使用了一些来阐明我想选择哪个元素)； )

Answer 1

您编写的伪代码有效!没有 last-child的 <li>没有 active类(class)。所以你的代码随时都会失败!与其中的另一个核对，最后<li>没有 active .

或者你需要使用last-of-type .检查 fiddle :

ol > li:not(.active):last-child > a {
  border: 1px solid green;
}

ol > li:not(.active):last-of-type > a {
  border: 1px solid green;
}

<ol>
    <li><a id="a" href="#">Not this</a></li>
    <li><a id="b" href="#">Not this</a></li>
    <li><a id="c" href="#">This one</a></li>
    <li class="active"><span>Not this</span></li>
</ol>

<ol>
    <li><a id="a" href="#">Not this</a></li>
    <li><a id="b" href="#">Not this</a></li>
    <li class="active"><span>Not this</span></li>
    <li><a id="c" href="#">This one</a></li>
</ol>

需要注意的一件事是，last-of-type不考虑 :not() .检查CSS: How to say .class:last-of-type [classes, not elements!] !您可能需要为此使用 JavaScript 或 jQuery。

部分解决方案

如果您知道 Not this总是出现在最后，你可以使用 nth-last-child(2) :

ol > li:not(.active):nth-last-child(2) > a {
  border: 1px solid green;
}

<ol>
    <li><a id="a" href="#">Not this</a></li>
    <li><a id="b" href="#">Not this</a></li>
    <li><a id="c" href="#">This one</a></li>
    <li class="active"><span>Not this</span></li>
</ol>