css实现快速定位⽗元素下最后⾯的⼏个⼦元素,匹配选择最后⼏个⼦元素
这样的业务还是会有的 特别的⼀些动态数据,因为前⾯的⼏个数量不定,但是后⾯⼏个是固定的这个时候,就需要我们能不能固定选中后⾯⼏个元素了
⽐如。选中后⾯三个元素。 其实我们可以通过css来实现了 很简单的 核⼼代码就是
nth-last-child(n) 这个伪类选择器的运⽤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
display: flex;
}
.child{
width: 200px;
height: 200px;
background: #f00;
css固定定位margin-right: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
其实还有⼀个样式属性 需要配合 就是 后⾯兄弟标签 属性。这个。~ 不知道 ⼩伙伴⽤的多不多这个属性
.child:nth-last-child(4) ~ .child{
background: #f0f;
}
我们加上这⾏代码 再看看效果
是不是就实现了 我们想要的效果呢。
今天虽然是周末了,但是没有对象的程序猿 只能和代码作伴了, 加油了 可能终会碰见那个她吧!
关注我。 持续更新 前端知识。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论