3

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

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

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

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

4

6 回答 6

3

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

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

<tr>
  <td>...</td>
  <td class = "penultimate">...</td>
  <td>...</td>
</tr>
于 2012-05-15T07:09:18.107 回答
2

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

于 2012-05-15T07:15:12.087 回答
1

只是因为你暗示你正在使用一张桌子

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

它需要您知道列数。这是一个解释。它对可以设置的样式有非常严格的限制（尽管它在 IE8 中确实有效）。这是一个示例 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;
}
于 2012-05-16T02:49:32.057 回答
1

nth-last-child 语法：

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

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

于 2013-10-03T16:39:10.623 回答
0

在CSS中使用它很简单：

:nth-last-child(2)
于 2016-04-01T11:11:32.297 回答
0

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

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

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

然后针对倒数第二个孩子：

jQuery('.parent div')[totalChildDivs-1].css("background: red;");
于 2016-12-15T17:59:14.173 回答