CSS选择器选择第一个实例与nth-type-of(1)失败时标记更改 [英] CSS selector to select first instance with nth-type-of(1) fail when markup changed

查看:250
本文介绍了CSS选择器选择第一个实例与nth-type-of(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>



问题



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 as 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆