CSS學習筆記(9)--詳解CSS中:nth-child的用法


詳解CSS中:nth-child的用法

前端的哥們想必都接觸過css中一個神奇的玩意,可以輕松選取你想要的標簽並給與修改添加樣式,是不是很給力,它就是“:nth-child”。

下面我將用幾個典型的實例來給大家講解:nth-child的實際用途:

Tips:還用低版本的IE瀏覽器的哥們請繞過!

:nth-child(2)選取第幾個標簽,“2可以是你想要的數字”

.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)選取大於等於4標簽,“n”表示從整數,下同

點此查看實例展示

.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)選取小於等於4標簽

點此查看實例展示

.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)選取偶數標簽,2n也可以是even

點此查看實例展示

.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)選取奇數標簽,2n-1可以是odd

點此查看實例展示

.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定義選取標簽,3n+1表示“隔二取一”

點此查看實例展示

.demo01 li:nth-child(3n+1){background:#090}

:last-child選取最后一個標簽

點此查看實例展示

.demo01 li:last-child{background:#090}

:nth-last-child(3)選取倒數第幾個標簽,3表示選取第3個

點此查看實例展示

.demo01 li:nth-last-child(3){background:#090}

ok,:nth-child的這些用法在實際中很用得着,不用單獨給需要選取的標簽加上ID或Class,是不是很拉轟!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM