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

學(xué)無先后，達(dá)者為師

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

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

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

這樣的業(yè)務(wù)還是會(huì)有的 特別的一些動(dòng)態(tài)數(shù)據(jù)，因?yàn)榍懊娴膸讉€(gè)數(shù)量不定，但是后面幾個(gè)是固定的這個(gè)時(shí)候，就需要我們能不能固定選中后面幾個(gè)元素了
比如。選中后面三個(gè)元素。 其實(shí)我們可以通過css來實(shí)現(xiàn)了 很簡(jiǎn)單的 核心代碼就是
nth-last-child(n) 這個(gè)偽類選擇器的運(yù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>

在這里插入圖片描述
其實(shí)還有一個(gè)樣式屬性 需要配合 就是 后面兄弟標(biāo)簽 屬性。這個(gè)。～ 不知道 小伙伴用的多不多這個(gè)屬性

 .child:nth-last-child(4) ~ .child {
            background: #f0f;
        }

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

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

關(guān)注我。 持續(xù)更新 前端知識(shí)。

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

欄目分類
最近更新