-1

这让我难住了...

在这里查看 JSBIN

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
    .slide-nav:nth-of-type(1) { color:red } /* this should select the number 1 */
</style>
</head>
<body>

  <div class="image">
    <span class="slide" data-order="4" rel="content-images/teta.jpg" ></span>
    <span class="slide" data-order="3" rel="content-images/champ.jpg" ></span>
    <span class="slide" data-order="2" rel="content-images/clouds.jpg" ></span>
    <img class="slide initial" data-order="1" src="content-images/air.jpg" />
    <span class="spinner"></span>

    <!--  
    delete this line to comment the two arrow links -->
    <a class="arrow next" href="javascript:void(0)">&rarr;</a>
    <a class="arrow prev" href="javascript:void(0)">&larr;</a>
    <!-- -->

    <a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
    <a class="slide-nav" href="javascript:void(0)" rel="2">2</a>
    <a class="slide-nav" href="javascript:void(0)" rel="3">3</a>
    <a class="slide-nav" href="javascript:void(0)" rel="4">4</a>
  </div>


</body>
</html>

问题

为什么.slide-nav:nth-of-type(1) { color:red }删除数字上方的两个附加链接时唯一的工作？

在 jsbin 中，删除两个箭头，或删除注释行以注释该块，您将看到.slide-nav:nth-of-type(1)选择器神奇地工作。

对于我的生活，它似乎无论如何都应该起作用。我在这里想念什么？

4

1 回答 1

5

CSS 中没有按类过滤，因为它没有 :nth-of-class() 选择器。:nth-of-type过滤器必须在标签上。

一种解决方法是将您的幻灯片导航链接包装在一个 span 中，并过滤aCSS 中的所有 s。

<span class="numbers">
    <a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
    <a class="slide-nav" href="javascript:void(0)" rel="2">2</a>
    <a class="slide-nav" href="javascript:void(0)" rel="3">3</a>
    <a class="slide-nav" href="javascript:void(0)" rel="4">4</a>
</span>

和 CSS

span.numbers a:nth-of-type(1) { color:red; } /* this should select the number 1 */

有关示例，请参见http://jsfiddle.net/3J4K6/

于 2012-10-07T08:14:14.260 回答