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

html-css023

怎么为某个类的最后一个元素设定 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>

选中状态，并且包括空格也匹配

CSS伪类(Pseudoclasses)是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value}，简单地用一个半角英文冒号(:)来隔开选择符和伪类。

CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的CSS伪类。

◆link用在为访问的连接上。

◆visited用在已经访问过的连接上。

◆hover用于鼠标光标置于其上的连接。

◆active用于获得焦点(比如，被点击)的连接上。

例如：

a:link{color:red }

a:visited{color:green}

a:hover{color:blue}

a:active{color:orange}