日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網(wǎng)站首頁 編程語言 正文

css實現(xiàn) 快速定位父元素下最后面的幾個子元素，匹配選擇最后幾個子元素

作者：yunchong_zhao 更新時間： 2022-04-18 編程語言

這樣的業(yè)務還是會有的 特別的一些動態(tài)數(shù)據(jù)，因為前面的幾個數(shù)量不定，但是后面幾個是固定的這個時候，就需要我們能不能固定選中后面幾個元素了
比如。選中后面三個元素。 其實我們可以通過css來實現(xiàn)了 很簡單的 核心代碼就是
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;
        }

我們加上這行代碼 再看看效果
在這里插入圖片描述
是不是就實現(xiàn)了 我們想要的效果呢。

今天雖然是周末了，但是沒有對象的程序猿 只能和代碼作伴了， 加油了 可能終會碰見那個她吧！

關注我。 持續(xù)更新 前端知識。

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

欄目分類
最近更新