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

html-css040

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

其实这个举个例子就很容易明白了。

div { display: block} 在这里,div 是选择器 ,花括号里面的 display 是属性,block 是 属性值,也就是你指的规则。

不管它怎么变,花括号前面的都是 选择器 ,

像你这里,如:div :last-child{ color:#f00} 它是作为一个选择器来选择到 指定的最后一个元素,所以它其实是一个选择器,一般情况下我们叫 这样的做 : 伪类选择器