怎么为某个类的最后一个元素设定 CSS 样式

html-css018

怎么为某个类的最后一个元素设定 CSS 样式,第1张

利用CSS3新增的一个伪类last-child

如下代码,设置最后一个类名为div1的元素

css写法为

.div:last-child{/*这里添加属性*/} <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

<style>

  .div1:last-child{}

</style>

</head>

<body>

  <div class="div1"></div>

  <div class="div1"></div>

  <div class="div1"></div>

  <div class="div1"></div>

  <div class="div1"></div>

  <div class="div1"></div>

</body>

</html>

看看是不是你想要的:

<style type="text/css">

.warp .a{

    background-color: #ccc

   height: 30px

}

.warp .a:last-child{ /*最后一个 class为a 的元素*/

    background-color: #000

}

</style>

<div class="warp">

<div class="a">1</div>

<div class="a">2</div>

<div class="a">3</div>

</div>