Question

这让我难过......

<!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)选择器神奇地工作。

对于我的生活，似乎无论如何都应该工作。我在这里缺少什么？

Answer 1

CSS中没有按类过滤，因为它没有：nth-of-class（）选择器。 :nth-of-type过滤器必须位于代码上。

解决方法是将您的幻灯片导航链接包含在范围内，并过滤CSS中的所有a。

<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/

当标记更改时，选择第n个类型为（1）的第一个实例的CSS选择器失败

问题

1 个答案: