Question

我希望制作类似nth-last-child(1 + odd)的内容，其中最后一个孩子会受到影响但仅在元素为奇数时才会受到影响。

nth-last-child(1 + odd)虽然不起作用，所以我该怎么办？

奖金：一个更灵活的答案，让我可以抓住最后一个孩子，只要它是奇怪的孩子和奇怪的孩子。

<ul>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>affected</li>
  <li>not effected</li>
  <li>affected</li>
</ul>

但是如果最后一个孩子是偶然的，那么没有任何事情发生，所以：

<ul>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
</ul>

Answer 1

我建议使用两个伪类略有不同的方法：

:nth-child(odd):last-child

首先选择所有奇数子元素，并将选择仅精炼到父元素的最后一个子元素。

＆＃13;

div {
  margin: 0 0 0.5em 0;
}
span {
  display: inline-block;
  counter-increment: spanIndex;
  width: 2em;
  height: 2em;
  border: 2px solid #000;
  border-radius: 25%;
  margin: 0 0.5em 0 0;
}

span::before {
  content: counter(spanIndex, decimal-leading-zero);
}

span:nth-child(odd):last-child {
  background-color: #f90;
}

＆＃13;

<div><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span></div>

＆＃13;

Answer 2

我希望制作类似nth-last-child(1 + odd)的内容，其中最后一个孩子会受到影响但仅在元素为奇数时才会受到影响。

正如已经解决的那样，:nth-child(odd):last-child（反之亦然 - 伪类的顺序无关紧要）。

奖金：一个更灵活的答案，让我可以抓住最后一个孩子，只要它是奇怪的孩子和奇怪的孩子。

我不确定我会认为这更灵活，但选择器语法现在非常有限，所以它是你得到的最好的：

:nth-child(odd):nth-last-child(3),
:nth-child(odd):last-child

:nth-child(odd):nth-last-child(-n+3)非常接近，但是如果那个孩子是奇数，则匹配倒数第二个孩子，这不是你想要的。

如果你真的必须有一个复合选择器，那么没有什么可以解决的：

:nth-child(odd):nth-last-child(-n+3):not(:nth-last-child(2))

Answer 3

您可以将两个选择器组合在一起：

:last-child:nth-child(odd)

<强>样本 http://codepen.io/dschu/pen/XmbKmq

<强> SCSS

ul 
{
  li
  {
    &:last-child:nth-child(odd)
    {
      background-color: red;
    }
  }
}

Answer 4

CSS是一种奇怪的编程语言。在其他语言中，我们有AND或&&;在CSS中，我们通过将选择器串在一起来实现这一点:(没有空格或逗号）：

div#foo.bar[attr="baz"]:first-child

选择任何元素

其类型为DIV 和
其ID为foo 和
其中一个类别为bar 和
其attr属性的值为baz 且
处于第一个孩子的位置。

在您的情况下，您希望最后一个子元素和的元素位于奇数位置，因此您可以将它们按上述方式串在一起。您使用了表达式，但仅限于，但这当然与和完全相同。

或

这就是和的工作原理;另外一个基本的逻辑操作是什么，或？在CSS中，通过指定逗号选择的多个选择器来表示，所以

div, #foo, .bar, [attr="baz"], :first-child

选择任何元素

其类型为DIV 或
其ID为foo 或
其中一个类别为bar 或
其attr属性的值为baz 或
处于第一个孩子的位置。

不

当然，最后一个基本的逻辑操作是不是。我将如何在CSS中表达这一点？现在我们有:not伪类，但它有一些限制，有时可能会让你失望。不的经典CSS方法是给出两个规则，一个更通用，一个给出例外。以“不是第一个孩子”为例：

div { color: blue }
div:first-child { color: inherit; }

表示“如果不是第一个孩子，请div蓝色。

怎么做：n-last-child（1 + odd）

4 个答案:

或

不