使第一个孩子和最后一个孩子在 IE8 中工作答案

【问题标题】：Make first-child and last-child work in IE8使第一个孩子和最后一个孩子在 IE8 中工作
【发布时间】：2013-06-06 22:59:04
【问题描述】：

在我的项目中，我正在尝试使用 selectivizr 使以下 css 在 IE8 中工作

thead>tr:first-child>th:last-child {
    color: red;
}
tbody>tr:first-child>td:last-child {
    color: red;
}

如Selectivizr网站所述，我在JSFiddle的“外部资源”中添加了以下代码。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="https://github.com/keithclark/selectivizr/blob/master/selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

我仍然无法让 first-child 和 last-child 伪选择器在 IE8 中工作。

我正在使用以下代码将所有版本的 IE 切换到 IE8。（仅供参考）。

<meta http-equiv="X-UA-Compatible" content="IE=8" >

【问题讨论】：

看起来last-child 是在 IE>=9 中实现的，因此它违反了包含它的整个规则。
@Teemu 我将上述 selectivizr 脚本仅包含到 IE8
现在我有两个疑问。 1) 我是否在 jsfiddle 中正确包含了脚本标签？ 2) [fallback css] 里面应该是什么？
您可以删除后备。它用于在浏览器中禁用 JS 时。您接受的答案不是这个问题的答案：为什么 selectivizr 不适用于 jQuery 1.10.x ？你应该说清楚，因为我来这里是为了寻找这个问题，而接受的答案不是你自己问题的答案。

标签： javascript jquery html css selectivizr

【解决方案1】：

IE8 不支持此选择器，因此您可以为第一个和最后一个元素分配 id 或特殊类。例如：

<tr class="thisSection">
     <td class="customClass firstTD">1</td>
     <td class="customClass">2</td>
     <td class="customClass">3</td>
     <td class="customClass lastTD">4</td>
</tr>

【讨论】：

抱歉，我无法选择其他方法。我处于需要使这些伪选择器在 IE8 中正常工作的状态。即使我需要包含 JS 库。在我当前的项目中，这根本不是我的选择。
@Mr_Green 为什么您需要让这些伪选择器在 IE8 中工作？为什么不能使用 JavaScript 为最后一个子元素添加这些类？
@MyHeadHurts 我无法动态添加代码。虽然我可以包含库。这是一个非常大的项目，动态添加代码风险太大。无论如何，我通过 Boltclock 的解决方案之一解决了它。

【解决方案2】：

我完成了以下操作，因为我有固定的列

thead>tr:first-child>th:first-child+th+th+th {
    color: red;
}
tbody>tr:first-child>td:first-child+td+td+td {
    color: red;
}

我这样做是因为first-child 支持 IE8 但不支持last-child。

它在 IE8 中可以正常工作。

Source

反正我还是不知道如何在项目中使用selectivizr。

【讨论】：