我們可以用CSS檢查，以了解一組元素的數(shù)量是否小于或等于一個(gè)數(shù)字。例如，一個(gè)擁有三個(gè)或更多子項(xiàng)的grid。你可能會(huì)想，為什么需要這樣做呢？在某些情況下，一個(gè)組件或一個(gè)布局可能會(huì)根據(jù)子元素的數(shù)量而改變。

這在CSS中已經(jīng)存在很多年了，但現(xiàn)在通過CSS :has，它變得更加強(qiáng)大。我們可以把nth-last-child選擇器和:has結(jié)合起來(lái)，以達(dá)到神奇的效果！你沒聽錯(cuò)。

在這篇文章中，我將強(qiáng)調(diào)幾個(gè)例子，說(shuō)明我們可以將一個(gè)CSS選擇器和:has結(jié)合起來(lái)，形成一個(gè)有條件的組件/布局狀態(tài)。

總覽

• 介紹:nth-last-child
• CSS中的數(shù)量查詢限制

• 不可能根據(jù)元素的數(shù)量來(lái)設(shè)計(jì)父元素的樣式
• 讓它們?cè)诓煌囊暱诔叽缟献嘈?/li>
• 為了控制間距要付出更多

• 使用案例 使用案例
• 基于子項(xiàng)數(shù)量而變化的Grid
• 動(dòng)態(tài)標(biāo)題布局
• 動(dòng)態(tài)新聞部分
• 模態(tài)框操作
• 用戶頭像
• 時(shí)間軸
• logo網(wǎng)格
• 總結(jié)
  

介紹:nth-last-child

這篇文章的主要要素之一是:nth-last-child偽類。我們可以使用該選擇器來(lái)模擬計(jì)算子元素。

來(lái)看看它是如何工作的。我將盡可能用直白的話來(lái)解釋。

請(qǐng)看下圖：

圖片

我們有一個(gè)五個(gè)卡片的列表。我們將用這個(gè)例子來(lái)證明我們可以用:nth-last-child做什么。

在下列CSS中，n + 3意味著：

li:nth-last-child(n + 3) {
    /* styles */
}

從末端選擇前三項(xiàng)，從第三項(xiàng)開始計(jì)算。

讓我們仔細(xì)看看。首先，我們需要從末端計(jì)算三個(gè)項(xiàng)。這樣一來(lái)，第三項(xiàng)實(shí)際上就是我們從末端開始計(jì)算的第一項(xiàng)。

圖片

我們從第三項(xiàng)算起直到最后，這里是被選中的項(xiàng)：

圖片

CSS中的數(shù)量查詢限制

我們可以使用:nth-last-child作為CSS的數(shù)量查詢。

請(qǐng)看下圖：

圖片

我們有一個(gè)信息清單，當(dāng)我們有5個(gè)或更多的項(xiàng)時(shí)，它的顯示方式會(huì)不同。

<ul>
   <li></li>
   <li></li>
   <li></li>
   <!-- more items -->
</ul>

li {
    /* default styles */
}

/* If the list has 5 or more items */
li:nth-last-child(n + 5),
li:nth-last-child(n + 5) ~ li {
  width: 50%;
  display: inline-block;
  border-bottom: 0;
}

雖然這很有效，但在某些方面仍然有點(diǎn)局限性。

不可能根據(jù)元素的數(shù)量來(lái)設(shè)計(jì)父元素的樣式

想象一下，當(dāng)有5個(gè)或更多的項(xiàng)時(shí)，我們需要為每個(gè)<li>添加display: flex。我們不能用 :nth-last-child 偽類選擇器來(lái)做這個(gè)。

原因是，添加display: flex將迫使每個(gè)項(xiàng)留在自己的行中，這與要實(shí)現(xiàn)的設(shè)計(jì)不一致。

li:nth-last-child(n + 5),
li:nth-last-child(n + 5) ~ li {
  width: 50%;
  display: flex;
  flex-direciton: column;
}

圖片

我們可以用display: inline-flex來(lái)解決這個(gè)問題，但對(duì)我來(lái)說(shuō)，這仍然不是最佳解決方案。原因是，瀏覽器會(huì)考慮到HTML元素之間的間距，它們應(yīng)該是這樣的：

<ul>
   <li></li><li></li><li></li>
   <!-- more items -->
</ul>

如果我們不這樣做，display: inline-flex的效果將與display: flex相同。解決這個(gè)問題的一個(gè)方法是將寬度減少1%。

li:nth-last-child(n + 5),
li:nth-last-child(n + 5) ~ li {
  width: 49%;
  display: flex;
  flex-direciton: column;
}

讓它們?cè)诓煌囊暱诔叽缟献嘈?/h3>

如果沒有對(duì)父類進(jìn)行控制的能力，就不能那么直接地對(duì)列表的布局進(jìn)行設(shè)計(jì)。例如，當(dāng)容器或視口寬度較小時(shí)，我們需要每行顯示1個(gè)項(xiàng)。

為了控制間距要付出更多

當(dāng)有3個(gè)或更少的項(xiàng)時(shí)，間距是水平的，而當(dāng)有5個(gè)或更多時(shí)，間距是垂直的。我們可以通過將頁(yè)邊距從水平方向翻轉(zhuǎn)到垂直方向，或者通過使用CSS gap與Flexbox來(lái)手動(dòng)管理。但是，在這種情況下，我們又不得不使用inline-flex。

CSS :nth-last-child偽類是構(gòu)建條件性布局的關(guān)鍵。通過將它與CSS :has選擇器相結(jié)合，我們可以檢查一個(gè)父元素是否至少有特定數(shù)量的項(xiàng)，并對(duì)其進(jìn)行相應(yīng)的樣式設(shè)計(jì)。這種可能性是無(wú)窮無(wú)盡的！

使用案例

基于子項(xiàng)數(shù)量而變化的Grid

圖片

當(dāng)我們需要基于子項(xiàng)數(shù)量而更改gird布局時(shí)，這在目前的CSS中是不可能的。在CSS的grid中，我們可以使用minmax()基于可用空間來(lái)動(dòng)態(tài)改變grid。

下面是我對(duì)CSS網(wǎng)格minmax()的看法：

.list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

結(jié)果看起來(lái)是這樣：

圖片

這一點(diǎn)都不完美。我們沒有太多的控制，因?yàn)槲覀冃枰{(diào)整minmax()中的150px的值。當(dāng)有4個(gè)或更少的項(xiàng)時(shí)，它可以很好地工作，而當(dāng)有5個(gè)或更多的項(xiàng)時(shí)就會(huì)出現(xiàn)問題。

解決辦法是什么？我們可以用CSS :has檢查是否有超過5個(gè)項(xiàng)目或更多，并在此基礎(chǔ)上改變minmax()的值。

/* default grid */
.list {
    --item-size: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-size), 1fr));
    gap: 1rem;
}

/* If the grid has 5+ items, change the --item-size width to 150px */
.list:has(li:nth-last-child(n + 5)) {
    --item-size: 150px;
}

我只是改變了--item-size變量，使代碼更容易閱讀，并避免重復(fù)。

動(dòng)態(tài)標(biāo)題布局

在下圖中，我們有一個(gè)標(biāo)題，當(dāng)導(dǎo)航項(xiàng)有4個(gè)或更多時(shí)，應(yīng)該改變其布局。通過CSS :has和:nth-last-child，我們可以檢測(cè)并改變布局。

圖片

.site-header:has(li:nth-last-child(n + 4)) {
    .site-header__wrapper > * {
        flex: initial;
    }

    .site-header__start {
        order: 2;
    }

    .site-header__middle {
        order: -1;
        text-align: start;
    }

    .site-header__end {
        margin-left: auto;
    }
}

以上是Sass的代碼。如果用CSS寫，可能看起來(lái)有點(diǎn)多。

.site-header:has(li:nth-last-child(n + 4)) .site-header__wrapper > * {
    flex: initial;
}

.site-header:has(li:nth-last-child(n + 4)) .site-header__start {
    order: 2;
}

.site-header:has(li:nth-last-child(n + 4)) .site-header__middle {
    order: -1;
    text-align: start;
}

.site-header:has(li:nth-last-child(n + 4)) .site-header__end {
    margin-left: auto;
}

我們能做得更好嗎？可以。但這還沒有得到很好的支持（目前來(lái)說(shuō)）。我們可以添加一個(gè)布爾CSS變量，當(dāng)標(biāo)題有4個(gè)或更多的項(xiàng)目時(shí)，它將被切換，然后使用樣式查詢來(lái)改變標(biāo)題。

.site-header:has(li:nth-last-child(n + 4)) {
    --layout-2: true;
}

有了這個(gè)，當(dāng)導(dǎo)航項(xiàng)有4個(gè)或更多時(shí)，我們?cè)O(shè)置變量--layout-2。

/* This will only works if the --layout-2 CSS variable is set */
@container style(--layout-2: true) {
  .site-header__wrapper {
    > * {
      flex: initial;
    }
  }

  .site-header__start {
    order: 2;
  }

  .site-header__middle {
    order: -1;
    text-align: start;
  }

  .site-header__end {
    margin-left: auto;
  }
}

動(dòng)態(tài)新聞部分

下面是一個(gè)新聞部分的設(shè)計(jì)，當(dāng)項(xiàng)目數(shù)為3或更多時(shí)，它應(yīng)該改變其布局。

圖片

通過組合CSS的:has和:nth-last-child，我們可以創(chuàng)建一個(gè)切換的CSS變量，它將被一個(gè)樣式查詢所檢查。

首先，我將假設(shè)默認(rèn)的卡片樣式是水平的。

<div class="layout">
    <article class="card"></article>
    <article class="card"></article>
    <article class="card"></article>
</div>

.layout {
  display: grid;
  grid-gap: 1rem;
}

.card {
  display: flex;
  gap: 1rem;
  align-items: center;
}

然后，我需要檢查.card元素的數(shù)量。

.layout:has(.card:nth-last-child(n + 4)) {
  --layout-4: true;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

現(xiàn)在，我們有一個(gè)CSS變量--layout-4，只有當(dāng)我們有4個(gè)或更多的項(xiàng)時(shí)才會(huì)被切換。我們可以用一個(gè)樣式查詢來(lái)檢查，并相應(yīng)地更新.card的樣式。

@container style(--layout-4: true) {
    .card {
        flex-direction: column;
    }

    .card__thumb {
        flex: 1;
        width: 100%;
        aspect-ratio: 4 / 3;
    }
}

模態(tài)框操作

在一個(gè)設(shè)計(jì)系統(tǒng)中，我們可能需要根據(jù)我們有多少個(gè)操作來(lái)動(dòng)態(tài)地控制模態(tài)操作的排列。

請(qǐng)看下圖：

圖片

比如說(shuō)，如果只有一個(gè)操作，它應(yīng)該居中。否則，向右對(duì)齊它們。

下面是CSS：

.modal__footer {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* If there are 2 buttons or more */
.modal__footer:has(a:nth-last-child(n + 2)) {
    justify-content: flex-end;
}

很簡(jiǎn)單，對(duì)不對(duì)。

用戶頭像

在編輯網(wǎng)站上，一篇文章可能由多個(gè)作者撰寫。一個(gè)常見的模式是，當(dāng)我們有多個(gè)作者時(shí)，用負(fù)間距堆疊作者的圖像。

圖片

僅僅通過使用數(shù)量查詢，我們就可以最低限度的實(shí)現(xiàn)，也就是：

• 添加負(fù)間距（互相堆疊頭像）。
• 當(dāng)有多個(gè)頭像時(shí)，縮小頭像的尺寸。

img:nth-last-child(n+2) ~ img {
    border: 2px solid #fff;
    margin-left: -0.25rem;
    width: 30px;
    height: 30px;
}

上面的方法可行，但它有局限性。如果我們想對(duì)容器本身進(jìn)行樣式設(shè)計(jì)呢？那么，這就是CSS :has變得強(qiáng)大的地方。

首先，我們需要檢查并切換CSS變量：

.post-author:has(img:nth-last-child(n + 2)) {
    --multiple-avatars: true;
}

如果CSS變量為true，就為多個(gè)頭像應(yīng)用下面的樣式：

@container style(--multiple-avatars: true) {
    .avatars-list {
        display: flex;
        background-color: #efefef;
        padding: 8px 12px;
        border-radius: 50px;
    }

    img:not(:first-child) {
        border: solid 2px #fff;
        margin-left: -0.25rem;
    }
}

時(shí)間線

另一個(gè)有趣的例子是時(shí)間線組件，它的CSS效果很好。

圖片

在這個(gè)例子中，我想讓時(shí)間線在有4個(gè)或更多項(xiàng)時(shí)，從垂直列表切換到交替式。

首先，使用:nth-last-child和:has：

.timeline-wrapper:has(.timeline__item:nth-last-child(n + 4)) {
    --alternating: true;
}

如果符合上述條件，將采用以下CSS：

@container style(--alternating: true) {
    /* Alternating timeline styles. */
}

在這里使用樣式查詢的有用之處在于，我們可以在另一個(gè)頁(yè)面上重復(fù)使用這些樣式。它不一定非得是一個(gè)有條件的CSS。

我可能會(huì)做這樣的事情：

.timeline-wrapper--page-10 {
    --alternating: true;
}

請(qǐng)不要介意.timeline-wrapper--page-10，這是個(gè)故意的隨機(jī)類名。這個(gè)CSS變量可以被分配到我們想要的任何地方，而且這個(gè)CSS開箱即用。

只要寫一次，就能在很多情況下發(fā)揮作用。

logo網(wǎng)格

在CSS中，要處理的一個(gè)棘手問題是對(duì)齊多個(gè)標(biāo)識(shí)，并確保它們都看起來(lái)不錯(cuò)。通過條件性CSS，我們可以檢測(cè)logo的數(shù)量，并將其尺寸縮小一些。

圖片

ul:has(li:nth-last-child(n + 8)) img {
    max-width: 160px;
    height: 35px;
}

總結(jié)

這是我所做的有趣的文章之一。結(jié)合現(xiàn)代的CSS功能可以讓我們以令人興奮的新方式來(lái)構(gòu)建布局，這篇文章的例子也不例外。

根據(jù)項(xiàng)目的數(shù)量來(lái)改變樣式可能不是一次性的用法，它可以被提取到不同的用例中。通過使用樣式查詢，我們可以只寫一次，并在任何地方重用它們。

• 本文譯自：https://ishadeed.com/article/conditional-css-has-nth-last-child[1]

參考資料

[1]https://ishadeed.com/article/conditional-css-has-nth-last-child:https://ishadeed.com/article/conditional-css-has-nth-last-child