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

    css如何除去最后一个元素样式

    醉折花枝作酒筹醉折花枝作酒筹2021-04-13 09:57:40原创2893

    css除去最后一个元素样式的方法:1、使用id或是类选择器将最后一个元素设置为默认样式即可;2、使用伪类“:last-child”,自动匹配最后一个元素,将其设置为默认样式即可,语法“元素名称:last-child{属性:默认值}”。

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

    很多人可能都碰到这样一个情况:

    <style>    
    .test li{    
       float:left;    
       border-right:1px solid #ccc;      
       width:100px;      
       height:100px;    
       }
    </stly>
       <ul class="test">    
           <li></li>    
           <li></li>    
           <li></li>
       </ul>

    这样就会出现三条右边框,在实际运用中最后条边框是需要去掉的。

    这里为大家介绍两种方法:

    1、为最后个li添加个样式

    .b-none{border:none}

    2、用css伪类:last-child,来自动匹配最后个元素,并执行相应的样式.

    .test li:last-child{border:none}

    第二种伪类方法在IE下有兼容问题,如果不考虑兼容问题的话,到是个好选择。

    推荐学习:css视频教程

    以上就是css如何除去最后一个元素样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 样式
    上一篇:详解CSS实现文字动画的N种技巧 下一篇:css怎么让元素超出父元素
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css border不显示怎么办• css边框阴影怎么设置• css怎么设置input颜色• css定位有哪些• css怎么设置下划线
    1/1

    PHP中文网