2.7 (案例)結(jié)構(gòu)性偽類選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>結(jié)構(gòu)性偽類選擇器</title>
    </head>
    <body>
        <h2>前端教育A</h2>
        <ul>
            <li>前端教育1</li>
            <li>前端教育2</li>
            <li>前端教育3</li>
            <li>前端教育4</li>
            <li>前端教育5</li>
            <li>前端教育6</li>
            <li>前端教育7</li>
            <li>前端教育8</li>
        </ul>
        <style type="text/css">
            ul{
                list-style: none;
            }
            
            /*first-child 單獨(dú)制定第一個子元素的樣式*/
/*          li:first-child{
                background:red;
            }*/
/*          ul:first-child{
                background: gold;
            }*/
/*          ul div:first-child{
                background: gold;
            }*/
/*          ul li:first-child{
                background: gold;
            }*/
            
            /*last-child 單獨(dú)制定最后一個子元素的樣式

*/
            /*li:last-child{
                background: yellow;
            }*/
            
            /*:nth-child(n) 循環(huán)使用樣式    ---  選擇

某個元素的一個或多個特定的子元素；*/
            /*其中n是一個簡單的表達(dá)式,從n＝0開始匹配直

到遍歷完所有子元素。
        以下表達(dá)式這里的“n”只能是"n"，不能使用其他字母代

替，不然會沒有任何效果的。*/
        /*參數(shù)是具體數(shù)字n 參數(shù)是n,n從0開始計算 */
        
/*      ul li:nth-child(3){
            background: #000;
            color: #fff;
        }*/
        /*既是li又是第3個子元素*/
        
        
        
        /*ul div:nth-child(3){
        
            background: #000;
            color: #fff;
        }*/
        /*既是div又是第3個子元素*/

        
/*      ul li:nth-child(n){
            background: #000;
            color: #fff;
        }*/
        /*n從0開始一直執(zhí)行到n=ul下li的總個數(shù)停止*/


        /*n的倍數(shù)選擇，n從0開始算*/ 
/*      ul li:nth-child(2n){
            background: #000;
            color: #fff;
        }*/




/*      ul li:nth-child(2n-1){
            background: #000;
            color: #fff;
        }*/
        
        /*大于等于5的所有子元素為li的*/
/*      ul li:nth-child(n+5){
            background: #000;
            color: #fff;
        }
*/






        /*推導(dǎo)公式*/
        /*n=0 －－》 -n+5=5 －－》 選擇了第5個li 
        n=1 －－》 -n+5=4 －－》 選擇了第4個li 
        n=2 －－》 -n+5=3 －－》 選擇了第3個li 
        n=3 －－》 -n+5=2 －－》 選擇了第2個li 
        n=4 －－》 -n+5=1 －－》 選擇了第1個li 
        n=5 －－》 -n+5=0 －－》 沒有選擇任何元素 */

        /*小于等于5的所有子元素為li的*/
/*      ul li:nth-child(-n+5){
            background: #000;
            color: #fff;
        }*/


        /*表示隔幾選一*/ 
    /*  ul li:nth-child(4n+1){ 
            background: #000;
            color: #fff;
        }
        */
        /*
            n=0 －－》4n+1=1 －－》選擇了第1個li 
            n=1 －－》4n+1=5 －－》選擇了第5個li 
            n=2 －－》4n+1=9 －－》選擇了第9個li 
        */


        /*:nth-last-child() 選擇某個元素的一個或多個特定的

子元素，從這個元素的最后一個子元素開始算；
        IE6-8和FF3.0-瀏覽器不支持“:nth-last-child()”選擇

器*/
/*      ul li:nth-last-child(3){
            background: #000;
            color: #fff;
        }
        */
/*      ul li:nth-last-child(2n){
            background: #000;
            color: #fff;
        }*/


        /*參數(shù)n一般是一個自然數(shù)，表示作為父元素下的倒數(shù)第n

個子元素。例如：:nth-last-child(2)表示作為父元素的倒數(shù)第2個子元素。
        
        參數(shù)n也可以為特定的表達(dá)式(表達(dá)式中只能使用字母n表示

自然數(shù)，大小寫均可)。例如:

        :nth-last-child(odd)表示匹配作為父元素倒數(shù)順序的奇

數(shù)(第1、3、5、7……個)子元素的元素；
        :nth-last-child(even)表示匹配作為父元素倒數(shù)順序的

偶數(shù)(第0、2、4、6、8……個)子元素的元素；
        :nth-last-child(3n)表示匹配作為父元素倒數(shù)順序的第

3n個子元素的元素(n表示包括0在內(nèi)的自然數(shù)，下同)；
        :nth-last-child(3n+1)表示匹配作為父元素倒數(shù)順序的

第3n+1個子元素的元素；
        :nth-last-child(3n+2)表示匹配作為父元素倒數(shù)順序的

第3n+2個子元素的元素；*/







        /*:nth-of-type()  選擇指定的元素；
        IE6-8和FF3.0-瀏覽器不支持這種選擇器
        :nth-of-type類似于:nth-child，不同的是他只計算選擇

器中指定的那個元素*/
/*      ul li:nth-child(3){
            background: #000;
            color: #fff;
        }*/
/*      ul li:nth-of-type(3){
            background: #000;
            color: #fff;
        }*/


        /*:nth-last-of-type()  選擇指定的元素，從元素的最

后一個開始計算；
        IE6-8和FF3.0-瀏覽器不支持這種選擇器
        前面的:nth-last-child一樣使用，只是他指定了元素的類

型而以*/
/*      ul li:nth-last-of-type(3){
            background: #000;
            color: #fff;
        }*/
        


        /*:first-of-type和:last-of-type  這兩個選擇器就類

似于:first-child和:last-child;不同之處就是指定了元素的類型。
        ie9一下不兼容*/
/*      ul li:first-of-type{
            background: #000;
            color: #fff;
        }*/

        /*ul li:first-child{
            background: #000;
            color: #fff;
        }*/




        
            
            
        </style>
    </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容