html最后一个元素不同样式

  • 发布时间:2017年6月1日 09:46
  • 作者:杨仕航
  • 分类标签: Web前端
  • 阅读(1689)
  • 评论(0)

本来没有任何冲动写这个内容,由于这几天又有人问起,总结3种方法。

先看看这个问题是怎样的。通常多个div或li(也可其他元素)组成1个列表。给每个元素加个下边框,但最后一个元素加下边框不怎么美观,于是需求去掉最后一个元素的下边框。如下代码(简单的示例代码):

<html>
<head></head>
<body>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

    <style type="text/css">
        ul{list-style-type: none;}
        .item{
            height: 3em; 
            line-height: 3em;
            border-bottom:1px #ccc solid;
        }
    </style>
</body>
</html>


如下效果:

20170601/20170601091936623.png


这个也就是本文标题的题意。可以通过CSS,jQuery,后台模版代码等方法处理。


1、CSS处理最后一个元素的样式

CSS3有个伪类:last-child可以获取最后个元素。加上如下的CSS代码:

.item{
    height: 3em; 
    line-height: 3em;
    border-bottom:1px #ccc solid;
}

.item:last-child{
    border-bottom: none;
}


这两个CSS设置还可以使用:not简写,提高代码的可读性:

.item{
    height: 3em; 
    line-height: 3em;
}

.item:not(:last-child){
    border-bottom:1px #ccc solid;
}


实现效果如下:

20170601/20170601092906573.png


当然,这个:last-child不是容易被驾驭。很容易导致里面的子元素也被设置同样的样式,而且这个是CSS3的样式,对旧浏览器兼容性不好。若你不考虑旧浏览器的话,尽管使用。


2、jQuery控制最后一个元素的样式

jQuery选择器可以快速获取到最后一个元素,给该元素加上一个class控制样式即可。修改代码如下:

<html>
<head>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

    <style type="text/css">
        ul{list-style-type: none;}
        .item{
            height: 3em; 
            line-height: 3em;
            border-bottom:1px #ccc solid;
        }
        .item-last{
            border-bottom: none;
        }
    </style>

    <script type="text/javascript">
        $(".item:last").addClass('item-last');
    </script>
</body>
</html>


在最后执行jQuery代码,给最后一个元素加上item-last类。item-last类在CSS中控制样式,不加上下边框。可以在浏览器按F12查看html代码,可看到最后1个li元素加上了item-last类:

20170601/20170601093752262.png


jQuery方法好处很明显,兼容性高。


3、后台模版代码控制

这个方法比较依赖后台,不同的后台开发语言有不同的方法。我以Django为例,Django遍历元素是使用for标签。如下代码遍历items变量得到li列表:

{% for item in items %}
    <li class="item">item.text</li>
{% endfor %}


Django模版标签在遍历过程中可以判断是否是最后一个元素:

{% for item in items %}
    
    <li class="
        item
        {% if forloop.last %} item-last{% endif %}
    ">
        item.text
    </li>
{% endfor %}


在li的class部分加上forloop判断是否是最后一个元素,若是最后1个,加上item-last类。注意item-last前面有个空格。

即可实现和前面jQuery的效果。

不过,我比较支持使用jQuery的方法,兼容性高且在前端实现。后台模版的方法是在后台服务器中执行,会消耗服务器部分资源。虽然消耗很少,但没必要。

上一篇:我的网站搭建(第55天) 站内消息通知

下一篇:Django使用第三方存储服务器

评论列表

智慧如你,不想发表一下意见吗?

新的评论

清空

猜你喜欢

  • 猜测中,请稍等...