【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
CSS3 结构伪类选择器可以用来选择元素基于其父元素的位置关系。以下是三种常见的结构伪类选择器：
:first-child选择器：选择父元素中的第一个子元素E。:last-child选择器：选择父元素中的最后一个子元素E。:nth-child(n)选择器：选择父元素中的第n个子元素E。
以下是对应的示例代码：
/* 选择每个 <p> 元素，该元素是其父元素的第一个子元素 */
p:first-child {
color: red;
}
/* 选择每个 <p> 元素，该元素是其父元素的最后一个子元素 */
p:last-child {
color: blue;
}
/* 选择每个 <p> 元素，该元素是其父元素的第二个子元素 */
p:nth-child(2) {
color: green;
}在使用 :nth-child 选择器时，可以使用更复杂的公式，如 2n 选择所有偶数项，2n+1 选择所有奇数项，n+5 选择第5个及以后的所有项，-n+5 选择前5个项等。
评论已关闭