霍者博客

CSS3选择器-结构性伪类选择器(六) only-child选择器

代码结构在下面,用伪类做出上面的效果

看如下代码,我们有3个UL列表,这三个列表中分别包含1个子元素LI、2个子元素LI和多个子元素LI,现在我们要选择只有1个子元素LI的元素,该如何做呢?

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器-结构性伪类选择器(六) | 霍者网页设计(www.huozheweb.com)!</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
                ul li{width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
                ul li:nth-child(1):nth-last-child(1){background:#900;}
        </style>
    </head>
    
    <body>
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
        
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项02 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项02 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项03 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项04 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项05 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项06 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>

我们可以结合之前学习的nth-child和nth-last-child选择器并且将索引都设置为1即可,如下代码:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器-结构性伪类选择器(六) | 霍者网页设计(www.huozheweb.com)!</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
                ul li{width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
                ul li:nth-child(1):nth-last-child(1){background:#900;}
        </style>
    </head>
    
    <body>
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
        
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项02 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项02 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项03 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项04 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项05 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项06 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>

其实我们还有更简单的方法,那就是only-child选择器

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器-结构性伪类选择器(六) | 霍者网页设计(www.huozheweb.com)!</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
                ul li{width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
                ul li:only-child{background:#900;}
        </style>
    </head>
    
    <body>
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
        
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项02 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
        <ul>
            <li>选项01 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项02 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项03 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项04 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项05 | 霍者网页设计(www.huozheweb.com)!</li>
            <li>选项06 | 霍者网页设计(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>


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

【我来说两句】
分享到:

评论 0

发表评论:

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