CSS 伪 Class 选择无效

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>

我想 select #c 通过 CSS。我试过：

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

据我了解 li:not(.active) select 是所有 li 元素，但带有 class .active.

的元素除外

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

非常感谢:)

PS: 列表长度是动态的，元素没有任何可用于 CSS selection 的 id （我只是在示例中使用了一些来阐明我想要哪个元素 select）;）

Answer 1

您编写的伪代码有效！ <li> 中没有 last-child，也没有 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>

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>

只有当最后两个不能同时激活 class 时，此代码才有效。如果他们在某个时候都具有活动 class，则此 css 也会失败。

Answer 3

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

如果你想select倒数第二个child那么你可以试试：

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>

CSS 伪 Class 选择无效

CSS Pseudo Class Selection not working

html

css

css-selectors

pseudo-class