css中有没有办法选择倒数第二个孩子？答案

【问题标题】：Is there a way in css to select second last child?css中有没有办法选择倒数第二个孩子？
【发布时间】：2016-12-16 01:59:14
【问题描述】：

还需要确保浏览器的兼容性（应该在 IE8 中工作）

我遇到了 - :nth-last-child(2)
但它不兼容浏览器，因为它是一个 css3 选择器。

我还发现了一个小窍门，让第二、第三、第四个孩子成为 - td:first-child + td + td
但是没有办法像
td:last-child - td
那样反转来获得倒数第二个孩子。

我不想使用 jquery。
将类应用于倒数第二个元素是唯一的选择吗？

【问题讨论】：

标签： jquery css css-selectors

【解决方案1】：

CSS3 nth-last-child 可能是要走的路，因为支持应该变得越来越普遍。

如果做不到这一点，您可以简单地将 CSS 类添加到标记中的元素，例如：

<tr>
  <td>...</td>
  <td class = "penultimate">...</td>
  <td>...</td>
</tr>

【讨论】：

【解决方案2】：

在指定的条件下，将class（或id）应用于倒数第二个元素是唯一的选择。

【讨论】：

您也可以应用属性。

【解决方案3】：

仅因为您暗示您正在使用表格

你不清楚你想对倒数第二组做什么，但是，只是因为你的例子是指表格单元格，我提供了这个可能的解决方案——使用<col />造型。

这需要您知道列数。 Here is an explanation。它对可以设置的样式有非常严格的限制（尽管它在 IE8 中有效）。 Here is an example fiddle，有如下例子：

HTML

<table>
    <col span="2"/>
    <col class="secondToLast"/>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>

CSS

.secondToLast {
    border: 1px solid blue;
    background-color: cyan;
    width: 100px;
}

【讨论】：

谢谢。但我不使用表格。问题是笼统地问的。我的应用程序中有 div 元素。
@Ash--div 元素的数量是未知的还是数量异常多？它们是否被任何其他元素（h2 标签等）打断？ rich.okelly 有“最佳”的一般答案，但如果确切的 html 结构更清楚，有时在 CSS 中可能会有创造性的解决方法，这就是为什么我要求提供有关您的结构的更多细节。

【解决方案4】：

nth-last-child 语法：

:nth-last-child(N) { } N 可以是：

number - 任何整数（1、2、10 等）。这将匹配该确切位置的孩子，从父母的底部向上计数。表达式 an+b 形式的代数表达式，允许您匹配更复杂的组合奇数 - 匹配所有其他孩子，从最后一个开始。 even - 匹配所有其他孩子，从倒数第二个开始。

【讨论】：

【解决方案5】：

在 CSS 中使用它很简单：

:nth-last-child(2)

【讨论】：

【解决方案6】：

如果 :nth-last-child(2) 不适合您：

您可以计算父级的所有子级 div：

var totalChildDivs = jQuery('.parent div').length;

然后定位倒数第二个孩子：

jQuery('.parent div')[totalChildDivs-1].css("background: red;");

【讨论】：