霍者博客

CSS3选择器-结构性伪类选择器(二):first-child :last-child :nth-child :nth-last-child

:first-child选择器和: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 li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
                #list li:first-child{color:#000; background:#fff;}/*选择#list的第一个子元素li*/
                #list li:last-child{color:#666; background:#dfdfdf;}/*选择#list的最后一个子元素li*/
        </style>
    </head>
    
    <body>
        <ul id="list">
                <li>选项一 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项二 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项三 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项四 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项五 | 霍者网页设计博客(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>

:nth-child选择器和:nth-last-child选择器

学会前两个结构性伪类选择器后,我们知道它们可以选择第一个和最后一个子元素,可是又有新的问题了,有的时候我是选择列表中的其中任何一个子元素该怎么办呢?

比如我想选择列表中的第二个子元素li,那么只需要li:nth-child(2){}即可,如果想要选择倒数第二个子元素li,那么只需要li:nth-last-child(2){}即可,案例如下:

<!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 li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
                #list li:nth-child(2){color:#000; background:#fff;}/*选择#list的第二个子元素li*/
                #list li:nth-last-child(2){color:#666; background:#dfdfdf;}/*选择#list的倒数第二个子元素li*/
        </style>
    </head>
    
    <body>
        <ul id="list">
                <li>选项一 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项二 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项三 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项四 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项五 | 霍者网页设计博客(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>

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

【我来说两句】
分享到:

评论 0

发表评论:

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