CSS伪类选择不起作用答案

【问题标题】：CSS Pseudo Class Selection not workingCSS伪类选择不起作用
【发布时间】：2015-08-18 23:31:03
【问题描述】：

我有以下 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（我只是在示例中使用了一些来说明我要选择哪个元素）； )

【问题讨论】：

当active 课程开始时，假设#b，您要定位哪一个？ #a（最后一个）还是#d（最后一个没有.active）？不要忘记 :last-child 的支持是 IE9+
好吧，活动类总是在最后一个元素上。浏览器支持对我来说不是问题:)
你想总是访问倒数第二个孩子吗？？
@Dimple：是的，有点……:)
@PraveenKumar：我接受并接受了；）非常感谢您的努力！

标签： html css css-selectors pseudo-class

【解决方案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: 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>

【讨论】：

您的部分解决方案为我做到了！非常感谢:)
@Fidel90 Gald 对你有帮助！

【解决方案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 也会失败。

【讨论】：

这就是我想要的。谢谢！
@Fidel90 如果这解决了您的问题而其他答案没有解决，请将解决方案更改为此答案 ;)

【解决方案3】：

看看这个：https://css-tricks.com/useful-nth-child-recipies/

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

ol li: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>

【讨论】：