Question

我想知道如何在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.Only通过CSS。

Answer 1

你做不到。给它一个独特的类名。

您可以执行:first和:last但不能执行此操作，我也不确定它们是否也适用于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

Answer 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";

Answer 3

就像Ian所说，IE7中的IE6和AFAIK也是不可能的。 IE7和IE8实际上支持CSS 2.1中的:first-child选择器（我确定你可以猜到它是什么），但不是{3}}也不是{3}} CSS 3。

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

3 个答案: