css3:nth-child() 选择器用法简介

文章目录

nth-child(n)是css3中的伪类选择器,作用是选择制定父元素中的第n个子元素,来改变改子元素的样式。n可以是数字、关键词或者公式。

实例1:数字

<style>
p:nth-child(2){
color:red;
}
</style>

实例1意思是选中当前页面的第二个p元素,并把p中文字的颜色改为红色。

实例2:关键词

<style>
p:nth-child(odd)
{
color:red;
}
</style>

实例2意思是选中当前页面的下标是奇数的p元素,并把p中文字的颜色改为红色。

odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词。

实例3:公式

<style>
p:nth-child(3n+0)
{
color:red;
}
</style>

实例3意思是选中当前页面的下标是3的倍数的p元素,并把p中文字的颜色改为红色。

原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录