: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:选择作为参数传递的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p:nth-child(2) { color: red; font-weight: bold; font-size: 20px; } </style> </head> <body> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </body> </html>
效果图:
示例2:选择偶数子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p:nth-child(even) { color: red; font-weight: bold; font-size: 20px; } </style> </head> <body> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </body> </html>
效果图:
示例3:选择奇数子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p:nth-child(odd) { color: red; font-weight: bold; font-size: 20px; } </style> </head> <body> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </body> </html>
效果图:
示例4:将线性等式作为参数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p:nth-child(3n + 2) { color: red; font-weight: bold; font-size: 20px; } </style> </head> <body> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </body> </html>
效果图:
以上就是如何使用CSS获取特定位置的子元素?的详细内容,更多请关注0133技术站其它相关文章!