css3中nth-child()的用法示例代码
发布时间：2024-01-19 15:18:52 作者：Realistic-er 
我要评论
我要评论nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型，这篇文章主要介绍了css3中nth-child()的用法示例代码,需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型。重点是“不论元素的类型这句话”，好多人容易误解这句话。
现在提出一个需求，如下图所示，将第二行和第三行的字体颜色改为红色和蓝色
<div class="father1">
<p>1234</p>
<p>12345</p>
<p>12345</p>
</div>css代码实现：很容易实现，利用p:nth-child(2)和p:nth-child(3)分别选中第2和第3个元素不就可以了吗？
.father1 {
width:300px;
height:300px;
background-color: aqua;
p:nth-child(2) {
color:red;
}
p:nth-child(3) {
color:blue;
}
}看效果图：
我现在又提出了一个新的需求：还是把将第二行和第三行的字体颜色改为红色和蓝色，要求使用nth-child（n）选择器实现
<div class="father1">
<img src="http://9i0i.com/pic.php?p=./2.jpg" alt="">
<p>12345</p>
<span>12345</span>
</div>那么有的人会这样去写css代码：
.father1 {
width:300px;
height:300px;
background-color: aqua;
p:nth-child(1) {
color:red;
}
span:nth-child(1） {
color:blue;
}
}来看效果图：
怎么没有生效呢？咱们代码写的也没有问题啊，p:nth-child(1)：p标签中排列的第一个元素，span:nth-child(1)：span标签中排列的第一个元素嘛？没有问题啊，怎么回事呀？
要注意：不论其元素类型。nth-child(n)指的是在父元素中所有的元素的顺序，上述html代码中，div是父元素，img，p和span标签都是div的子元素，p排在第2个，span排在第3个，这才是对n的正确理解。
咱么试一试，改动一下css代码：
.father1 {
width:300px;
height:300px;
background-color: aqua;
p:nth-child(2) {
color:red;
}
span:nth-child(3) {
color:blue;
}
}效果图：
到此这篇关于css3中nth-child()的用法的文章就介绍到这了,更多相关css3 nth-child()用法内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
这篇文章主要介绍了IE8下CSS3选择器nth-child() 不兼容问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-16CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
css3的强大，让人惊叹，今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式，具体的详细示例可以参考下文，希望对大家有所帮助2013-11-05- CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类2010-07-10
- 网页制作Webjx文章简介：CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，今天我们就来“2009-04-02
最新评论