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类.所以你的代码随时都会失败!检查另一个,最后一个<li>没有active.

或者你需要使用last-of-type.检查小提琴:

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:怎么说.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>