css3 第n个

CSS3中关于nth-child()伪类提供了一种选择某个元素在父级元素的所有子元素中的第N个位置，可以按照自己的需求选取目标元素。

// 选取第2个子元素p:nth-child(2) {
    color: red;
}
// 选取每个奇数位置的子元素p:nth-child(odd) {
    font-size: 20px;
}
// 选取1到3位置的子元素p:nth-child(-n+3) {
    text-align: center;
}

需要注意的是，n表示无限个元素，nth-child()的参数可以是常数、它的多个倍数、公式、关键词或括号内包含的表达式。

关于nth-child()，还有一些其他的伪类，比如nth-last-child()，表示选取所有子元素中的倒数第N个；nth-of-type()表示选取同类型元素在其父元素中的第N个；nth-last-of-type()表示选取同类型元素在其父元素中倒数第N个。

// 选取同类型元素在其父元素中的第3个p:nth-of-type(3) {
    background-color: yellow;
}
// 选取同类型元素在其父元素中的奇数位置p:nth-of-type(odd) {
    border: 1px solid black;
}
// 选取同类型元素在其父元素中的倒数第2个p:nth-last-of-type(2) {
    margin-top: 40px;
}
    

这些伪类可以让我们更加方便地控制和选择子元素，灵活地实现我们的页面效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！