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

    css怎样修改第n个元素样式

    长期闲置长期闲置2021-11-23 11:39:35原创86

    在css中,可以利用“:nth-child”选择器来选中第n个元素并修改该元素的样式,该选择器能匹配属于其父元素的第n个子元素,不论元素的类型,语法为“:nth-child(n){修改内容;}”。

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

    css怎样修改第n个元素样式

    在css中可以使用:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。然后在去修改,n 可以是数字、关键词或公式。

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    p:nth-child(2)
    {
    background:#ff0000;
    }
    </style>
    </head>
    <body>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
    </body>
    </html>

    输出结果:

    1123.09.png

    上述示例便是修改了第二个元素的背景颜色,下面我们再来看一下:

    打开我们的编辑器。创建一组序列作为示范。first-child就是第一个元素。last-child就是最后一个元素。nth-child(3)就是第三个元素。也可以巧妙地指定偶数。

    1123.10.png

    1123.11.png

    相关视频教程推荐:jQuery视频教程

    以上就是css怎样修改第n个元素样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎样实现自适应正方形 下一篇:css怎样实现文本框无光标
    VIP会员

    相关文章推荐

    • css同一行字体怎样改变不同颜色• css如何设置div之间距离• css怎样设置hr居中• css实现旋转45度的属性是什么• css怎样实现自适应正方形

    全部评论我要评论

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

    PHP中文网