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。检查小提琴：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

部分解决方案

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以尝试以下CSS：

ol > li:not(.active):nth-last-child(1) > a,
 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"><a id="d" href="#">Not this</a>
  </li>
</ol>

<ol>
  <li><a id="e" href="#">Not this</a>
  </li>
  <li><a id="f" href="#">Not this</a>
  </li>
  <li class="active"><a id="g" href="#">Not this</a>
  </li>
  <li><a id="h" href="#">This one</a>
  </li>
</ol>

只有当最后两个代码不能同时拥有活动类时，此代码才有效。如果他们在某些时候都有活动类，那么这个css也会失败。

Answer 3

检查出来：https://css-tricks.com/useful-nth-child-recipies/

如果您只想选择倒数第二个孩子，那么您可以尝试：

＆＃13;

ol li:nth-last-child(2) a{
border:1px solid green
}

＆＃13;

<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>

＆＃13;

CSS伪类选择不起作用

3 个答案: