小编给大家分享一下css3选择器孩子如何使用,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
对于css3的结构伪类选择器,为了更好地让刚刚学习css3教程的新手能够理解,我们先来给大家讲解一下css3选择器孩子选择器。
& lt; !DOCTYPE html>
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; title> CSS3结构伪类选择器& lt;/title>
& lt;风格类型=拔谋?css"比;
*{填充:0;保证金:0;}
ul
{
显示:inline-block;
宽度:200 px;
list-style-type:没有;
}
ul李
{
高度:20 px;
}
ul李:第一个孩子{背景颜色:红色;}
ul李:nth-child(2){背景颜色:橙色;}
ul李:nth-child(3){背景颜色:黄色;}
ul李:nth-child (4) {background:绿色;}
ul李:胎{背景颜色:蓝色;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
效果如下:
& lt; !DOCTYPE html>
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; title> CSS3结构伪类选择器& lt;/title>
& lt;风格类型=拔谋?css"比;
*{填充:0;保证金:0;}
ul
{
显示:inline-block;
宽度:200 px;
边界:1 px固体灰色;
list-style-type:没有;
}
ul李
{
高度:20 px;
背景颜色:绿色;
}/*设置偶数列颜色*/ul李:nth-child(甚至)
{
背景颜色:红色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
效果如下:
看完了这篇文章,相信你对css3选择器孩子如何使用有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
