css选择器如何获取最后一个可视div

html-css014

css选择器如何获取最后一个可视div,第1张

首先要知道div的父元素，假设也是div

<div>

    <div></div>

    <div></div>

    <div></div>

</div>

获取div中最后一个div：

css:div div:last-child{}

如果用js控制，需要遍历HTML文档，提取最后的DIV，然后再加样式：

<script type="text/javascript">

$(document).ready(function(){

  $("div").last().addClass('highlight')    //添加class

  $("div").last().css("background", "red") //直接添加样式

})

</script>

如果是css控制，需要在div里面添加class样式，或者写行内样式控制：

<div style="color:red" class="color">内容</div>

<style>

.color{color:red}

</style>

在你的“.liebiao div”样式之后再加上一个样式：

.liebiao div:last-child { margin-right: 0}

0不用加上"px"的单位，可以一定节约代码量，这是CSS的一个约定俗成。

如果你浏览器版本比较老旧你可以这样写上面的样式：

.liebiao div.mr-0 { margin-right: 0}

然后将“mr-0”这个样式加入你的最后一个<div>标签上，如下：

<div class="mr-0">

<ul><li>4</li></ul>

</div>

<补充>：你的padding-left:5px也会占据一定的宽度，你需要在你原本的“.liebiao div

”样式内加上一个属性"box-sizing: border-box"，这样你就可以不用将你的width-5px了