这让我难过......
<!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)">→</a>
<a class="arrow prev" href="javascript:void(0)">←</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)
选择器神奇地工作。
对于我的生活,似乎无论如何都应该工作。我在这里缺少什么?
答案 0 :(得分:5)
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/