霍者博客

CSS3选择器-结构性伪类选择器(四) nth-of-type选择器和nth-last-of-type选择器

上节(CSS3选择器-结构性伪类选择器(三)),我们学习了nth-child和nth-last-child的高级用法,可以实现隔行变色等效果,但是它在使用的过程中有一个问题,是什么问题呢?

咱们来看下面的这个例子:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器-结构性伪类选择器(四) - 霍者网页设计博客(www.huozheweb.com)!</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                #list{font-family:"Microsoft yahei"; font-size:14px;}
                #list dt,#list dd{height:30px; line-height:30px; text-align:center; color:#000; list-style:none;}
                #list dt:nth-child(odd){color:#fff; background:#900;}/*当前dl列表的第奇数个子元素如果是dt子元素,那么将选择它*/
                #list dt:nth-child(even){background:#090;}/*当前dl列表的第偶数个子元素如果是dt子元素,那么将选择它*/
        </style>
        </head>
    
        <body>
                <dl id="list">
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                </dl>
      </body>
</html>

从上面的代码中,我们可以发现明明设置了奇数行和偶数行的dt,按道理来讲,应该是如下图这种运行效果才对:

但是运行上述代码后,得到的却是这样的:

这是因为,nth-child和nth-last-child在计算子元素是奇数行还是偶数行的时候,是连通父级元素中的所有子元素一起计算的,换句话说,dt:nth-child(odd)这句话的含义,并不是指“当前dl列表中的第奇数个dt子元素来计算”,而是指“当前dl列表的第奇数个子元素如果是dt子元素,那么将选择它”,那么这种计算方式与我们所“理解”的这种需求怎么计算呢?

nth-of-type选择器和nth-last-of-type选择器

  这两个选择器可以避免上述的问题,CSS3在计算子元素是第奇数个还是第偶数个自元素的时候,就只针对同类型的子元素进行计算了,这两个选择器的使用方法如下所示:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器-结构性伪类选择器(四) - 霍者网页设计博客(www.huozheweb.com)!</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                #list{font-family:"Microsoft yahei"; font-size:14px;}
                #list dt,#list dd{height:30px; line-height:30px; text-align:center; list-style:none; color:#fff;}
                #list dd{color:#000;}
                #list dt:nth-of-type(odd){background:#900;}/*奇数行*/
                #list dt:nth-of-type(even){background:#090;}/*偶数行*/
        </style>
    </head>
    
    <body>
                <dl id="list">
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                    <dt>霍者网页设计博客(www.huozheweb.com)!</dt>
                    <dd>霍者网页设计博客,网页设计师聚集地,教程、资源完全免费!</dd>
                </dl>
    </body>
</html>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/456.html,标题:CSS3选择器-结构性伪类选择器(四) nth-of-type选择器和nth-last-of-type选择器

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。