失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > css找某个元素的下个子元素 使用CSS获取特定位置的子元素

css找某个元素的下个子元素 使用CSS获取特定位置的子元素

时间:2023-06-24 10:55:51

相关推荐

css找某个元素的下个子元素 使用CSS获取特定位置的子元素

想要使用CSS获取特定位置的子元素,可以使用CSS :nth-child()选择器。:nth-child()选择器仅用于选择属于其父级的第n个子级(无论类型如何)的元素。下面本篇文章就来给大家介绍一下CSS :nth-child()选择器,希望对大家有所帮助。

:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。

语法:: nth-child(arg) {

// CSS样式

}

参数:

其中arg是表示匹配元素的模式的参数。它可以是一个数字(number)、一个关键字(odd 或 even)或一个线性方程。

●number:表示其位置由参数指定的元素。

●odd:表示位置为奇数的元素,即1,3,5等。

●even:代表位置均匀的元素,即2,4,6等。

●线性方程:表示每个正整数n的位置与模式A * n + B匹配的元素。n的值从零开始。

示例1:选择作为参数传递的元素

p:nth-child(2) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

效果图:

示例2:选择偶数子元素

p:nth-child(even) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

效果图:

示例3:选择奇数子元素

p:nth-child(odd) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

效果图:

示例4:将线性等式作为参数

p:nth-child(3n + 2) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

效果图:

更多web前端开发知识,请查阅 HTML中文网 !!

如果觉得《css找某个元素的下个子元素 使用CSS获取特定位置的子元素》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。