网站首页编程语言正文

css实现快速定位父元素下最后面的几个子元素，匹配选择最后几个子元素

作者：yunchong_zhao 更新时间： 2022-04-18 编程语言

这样的业务还是会有的特别的一些动态数据，因为前面的几个数量不定，但是后面几个是固定的这个时候，就需要我们能不能固定选中后面几个元素了
比如。选中后面三个元素。其实我们可以通过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>Documenttitle>
    <style>
        .parent {
            display: flex;
        }
        .child {
            width: 200px;
            height: 200px;
            background: #f00;
            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;
        }

我们加上这行代码再看看效果
在这里插入图片描述
是不是就实现了我们想要的效果呢。

今天虽然是周末了，但是没有对象的程序猿只能和代码作伴了，加油了可能终会碰见那个她吧！

关注我。持续更新前端知识。

原文链接：https://yunchong.blog.csdn.net/article/details/121053009

上一篇：后端接口返回一个图片地址，前端h5，pc浏览器，下载图片文件
下一篇：python dataframe实现统计行列中零值的个数_p

网站首页 编程语言 正文

css实现 快速定位父元素下最后面的几个子元素，匹配选择最后几个子元素

相关推荐

网站首页编程语言正文

css实现快速定位父元素下最后面的几个子元素，匹配选择最后几个子元素