• 技术文章 >web前端 >前端问答

    css选择第几个子元素用什么选择器

    青灯夜游青灯夜游2021-05-21 11:19:05原创917

    在css中,想要选择指定元素中第几个子元素,可以使用“:nth-child()”选择器。“:nth-child()”选择器可以匹配属于其父元素的第N个子元素,不论元素的类型;而N可以是数字、关键词或公式。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css选择器指定元素中第几个子元素

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

    n 可以是数字、关键词或公式。

    示例:

    tr td:nth-child(2){
        background-color:gray;
    }

    就是tr当中的td的第二个td的属性

    tr:nth-child(2n+0){
        background-color:#F0F0F0;
    }

    这个是tr的2的倍数的

    使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

    在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:

    p:nth-child(3n+0)
    {
    background:#ff0000;
    }

    (学习视频分享:css视频教程

    以上就是css选择第几个子元素用什么选择器的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 选择器
    上一篇:css选择器的分类有哪些 下一篇:html中css代码放哪里
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css怎么清除空白• css如何设置颜色透明度• 纯CSS3如何实现文字效果?8种文字效果分享• css如何设置下划线的颜色• 5个你已经可以尝试的css新特性
    1/1

    PHP中文网