css3 - css中如何让第一个和最后一个不被选中?

html-css017

css3 - css中如何让第一个和最后一个不被选中?,第1张

方法很多种，例如通过伪类：last-child{ 样式 }这个是选择最后一个父级子元素。

第一个父级子元素可以这样nth-child(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>

1，看代码参考。

2，animation-fill-mode : none | forwards | backwards | both

none：不改变默认行为。forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both：向前和向后填充模式都被应用。