• 技术文章 >web前端 >css教程

    css选择器怎么选择倒数第几个元素

    长期闲置长期闲置2021-12-14 15:23:06原创2022

    在css中,可以利用“:nth-last-child()”选择器选择倒数第几个元素,该选择器从父元素的最后一个子元素开始计数,来匹配父元素的子元素,语法为“父元素:nth-last-child(子元素倒数值){css样式代码;}”。

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

    css选择器怎么选择倒数第几个元素

    在css中,想要利用选择器选择倒数的第几个元素,可以利用:nth-last-child(n) 选择器。

    :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。

    n可以是一个数字,一个关键字,或者一个公式。

    示例如下:

    <html>
    <head>
    <meta charset="utf-8"> 
    <title>123</title> 
    <style> 
    p:nth-last-child(2)
    {
    background:#ff0000;
    }
    </style>
    </head>
    <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p>选择p元素中的倒数第二个元素,改变其背景颜色。</p>
    </body>
    </html>

    输出结果:

    16.png

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

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css样式中focus是什么意思 下一篇:css3的font是什么意思
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 小写变大写的css代码是什么• css3怎样控制旋转时间• css怎样去除标题的样式• css怎样实现对号效果• css样式中focus是什么意思
    1/1

    PHP中文网