如何在 IE6+7 中通过 CSS 访问第 n 个元素答案

【问题标题】：How to access nth element through CSS in IE6+7如何在 IE6+7 中通过 CSS 访问第 n 个元素
【发布时间】：2009-04-15 19:34:38
【问题描述】：

我想知道我们如何在 IE6/IE7 中使用 CSS 访问 <li> 的第 n^th 个元素。

HTML：

<ul class="myUL">
  <li><a href="" target="">Link1</a></li>
  <li><a href="">Link2</a></li>
  <li><a href="">Link3</a></li>
</ul>

现在假设我想访问 Link2，该怎么做？注意：不使用javascript。仅通过CSS。

【问题讨论】：

标签： css internet-explorer

【解决方案1】：

你不能。给它一个唯一的类名。

您可以使用:first 和:last，但不能使用 n'th，我也不确定它们是否可以在 IE6 中使用。

<ul class="myUL">
  <li class="link1"><a href="" target="">Link1</a></li>
  <li class="link2"><a href="">Link2</a></li>
  <li class="link3"><a href="">Link3</a></li>
</ul>

在 CSS 中，参考 ul.myUl li.link2

【讨论】：

【解决方案2】：

正如 Ian 所言，静态 CSS 无法做到这一点。但是，您可以使用 JavaScript。

HTML：

<ul class="myUL" id="myUL">
    <li><a href="" target="">Link1</a></li>
    <li><a href="">Link2</a></li>
    <li><a href="">Link3</a></li>
</ul>

JS：

var n = 2;
nthElem = getElementById("myUL").childNodes[n-1];
nthElem.style = "color: red";
//or
nthElem.className = "cssClassForNthElem";

【讨论】：

谢谢你的帮助，但我已经提到“没有 javascript”，还有其他替代方式吗？
Somu：是的，我看到你已经添加了。对不起，唯一的选择是那个或伊恩的。

【解决方案3】：

正如 Ian 所说，这在 IE6 中是不可能的，在 IE7 中也是如此。 IE7 和 IE8 实际上支持 CSS 2.1 中的 :first-child 选择器（我相信你可以猜到它的作用），但不支持 CSS 3 的 :nth-child 和 :last-child。

【讨论】：