CSS选择器选择第一个实例与nth-type-of(1)失败时标记更改 [英] CSS selector to select first instance with nth-type-of(1) fail when markup changed
问题描述
这让我很难...
<!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>
问题
c $ c> .slide-nav:nth-of-type(1){color:red} 仅在删除数字上方的两个附加链接时才起作用?
Question
Why does the .slide-nav:nth-of-type(1) { color:red }
only work when the two additional links above the numbers are removed?
在jsbin中,删除两个箭头,或删除注释掉的行来注释该块,你会看到 .slide-nav:nth-of-type )
选择器工作神奇。
In the jsbin, delete the two arrows, or delete the commented line to comment that block and you'll see that the .slide-nav:nth-of-type(1)
selector works magically.
对我的生活,似乎它应该只工作,不管。
For the life of me, it appears that it should just work regardless. What am I missing here?
推荐答案
在CSS中没有类的过滤器,因为它没有一个:nth-of- class()选择器。 :nth-of-type
过滤器必须在标签上。
There is no filter by class in CSS because it does not have a :nth-of-class() selector. :nth-of-type
filter has to be on a tag.
nav链接在一个范围内,并为CSS中所有 a
的过滤器。
A workaround is to wrap your slide-nav links inside a span and filter for all a
s inside in CSS.
<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/
这篇关于CSS选择器选择第一个实例与nth-type-of(1)失败时标记更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!