html选择器有哪些child,css3选择器child有哪些?css3选择器child用法详解
本篇文章給大家帶來的內容是關于css3選擇器child有哪些?css3選擇器child用法詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
對于CSS3的結構偽類選擇器,為了更好地讓剛剛學習CSS3教程的新手能夠理解,我們先來給大家講解一下css3選擇器child選擇器。
這些結構偽類選擇器都很好理解,下面我們通過幾個實例讓大家感受一下這些選擇器的用法。
代碼如下:
CSS3結構偽類選擇器*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
list-style-type:none;
}
ul li
{
height:20px;
}
ul li:first-child{background-color:red;}
ul li:nth-child(2){background-color:orange;}
ul li:nth-child(3){background-color:yellow;}
ul li:nth-child(4){background-color:green;}
ul li:last-child{background-color:blue;}
效果如下:
分析:
想要實現同樣的效果,很多人想到在li元素加上id或class屬性來實現。但是這樣會使得HTML結構id和class泛濫,不便于維護。使用結構偽類選擇器,使得我們HTML結構非常清晰,結構與樣式分離,便于維護。
上面這種使用結構偽類選擇器的地方非常多,特別適合操作列表中列表項的不同樣式。
舉例:
CSS3結構偽類選擇器*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
border:1px solid gray;
list-style-type:none;
}
ul li
{
height:20px;
background-color:green;
}
/*設置偶數列顏色*/
ul li:nth-child(even)
{
background-color:red;
}
效果如下:
分析:
隔行換色這種效果也很常見,例如表格隔行換色、列表隔行換色等,這些也是用戶體驗非常好的設計細節。
以上就是對css3選擇器child有哪些?css3選擇器child用法詳解的全部介紹,如果您想了解更多有關CSS3教程,請關注PHP中文網。
總結
以上是生活随笔為你收集整理的html选择器有哪些child,css3选择器child有哪些?css3选择器child用法详解的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 电脑初学者入门教程
- 下一篇: 计算机科学与技术及应用,计算机科学与技术