:first-child,:nth-child选择器的使用和隔行变色

lik-7

于 2022-07-14 18:11:08 发布

阅读量2.2k

点赞数

分类专栏：表格文章标签： css html

本文链接：https://blog.csdn.net/m0_68169119/article/details/125788746

版权

本文介绍了CSS选择器:nth-child(n)的用法，包括如何选择父元素的第N个子元素，以及如何实现隔行变色效果。通过示例展示了:first-child、:nth-child(2n)和:nth-child(2n+1)等不同情况的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天使用最重要的选择器就是:nth-child(n){}

选择器匹配匹配属于其父元素的第N个子元素，不论元素的类型。N可以是数字、关键词或者公式

1. 背景图为黄色，设置四个div，只给第一个添加样式

如果选择第一个的用法是:first-child{}，可以设置其效果

        div {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
            text-align: center;
            line-height: 100px;
            margin-left: 20px;
        }

        div:first-child{
            background-color: red;
        }

  
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>    
        <div>6</div>

这就是:first-child选择器的使用,选中第一个变样式

最低0.47元/天解锁文章