动态加载的li怎么给最后一个元素添加边框

1、首先CSS3新增的：not()伪类选择符，匹配不含有选择符的元素。

2、其次鼠标经过当前li，当前li添加上边框颜色变为红色，第一个li的上边框始终为红色。

3、最后使用lastchild的border为none去掉最后一个元素的右边框即可。

思路：为添加边框样式设置一个class（设为selected），点击li后使用removeClass()方法删除其他li的selected类，并且为当前li添加selected类。

实例演示如下:

1、HTML结构

<style>

  ul.test li{display:inline-blockborder:1px solid white}  /*默认为白色边框*/

.selected{border:1px solid #ff99cc !important}

</style>

<ul class="test">

    <li>Glen</li>  <li>Tane</li>   <li>John</li>   <li>Ralph</li>

</ul>

2、jquery代码

$(function(){

    $("li").click(function() {

        $(this).siblings('li').removeClass('selected')    // 删除其他li的边框样式

        $(this).addClass('selected')                            // 为当前li添加边框样式

    })

})

3、效果演示

---