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

    css选择器怎么选取第几个元素

    藏色散人藏色散人2021-02-03 10:11:45原创1280

    css选择器选取第几个元素的方法:1、使用“first-child”选择器选取属于其父元素的首个子元素;2、使用“last-child”选择列表中的最后一个标签;3、使用“nth-child(3)”选择第3个标签等等。

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

    css用选择器选取第几个元素?

    css怎么用选择器选取第几个元素?下面本篇文章来给大家介绍一下CSS使用选择器实现选取第几个元素效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?

    其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如果是静态代码,php就无法用了。

    这时,我们还可以通过CSS来实现,CSS给我们提供了几个非常有用的样式参数:first-child、last-child、nth-child(n)。下面,详细看一下它们的使用。

    1、first-child

    first-child选择器用于选取属于其父元素的首个子元素的指定选择器。

    选择li 列表中的 第一个li模块的背景颜色。

    li:first-child{background:#090}

    2、last-child

    last-child表示选择列表中的最后一个标签,代码如下:

    li:last-child{background:#090}

    3、nth-child(3)

    表示选择第3个标签,代码如下:

    li:nth-child(3){background:#090}

    上面代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。

    4、nth-child(2n)

    这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。

    5、nth-child(2n-1)

    这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签。

    6、nth-child(n+3)

    这个表示选择列表中的标签从第3个开始到最后。

    7、nth-child(-n+3)

    这个表示选择列表中的标签从0到3,即小于3的标签。

    8、nth-last-child(3)

    这个表示选择列表中的倒数第3个标签。

    推荐:《css视频教程

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么调整字体 下一篇:css 不规则边框怎么设置
    大前端线上培训班

    相关文章推荐

    • 怎么在jsp中打css代码• css如何设置输入框不可编辑• 在css中不属于添加在当前页面的形式是什么• css如何自适应浏览器• css 修改后 不更新怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网