搜尋

首頁 >web前端 >css教學 >如何等待兄弟姐妹計數（）和兄弟index（）函數

如何等待兄弟姐妹計數（）和兄弟index（）函數

William Shakespeare
William Shakespeare原創
2025-03-07 17:13:16236瀏覽

How to Wait for the sibling-count() and sibling-index() Functions

CSS 新特性並非憑空出現，而是經過漫長的流程：討論、評估、定義、編寫、原型設計、測試、發布、支持等等。這個過程非常漫長，即使我們渴望使用新特性，也只能等待。

但我們可以選擇不同的等待方式：完全避開使用該特性的界面或演示？還是挑戰CSS的邊界，嘗試自己實現？

許多富有進取心和好奇心的開發者選擇了後者。沒有這種心態，CSS 就會停滯不前。因此，今天我們將探討兩個即將推出的函數：sibling-count() 和 sibling-index()。我們已經期待它們多年了，所以讓我放飛好奇心，提前感受一下它們的魅力吧！

樹狀計數函數

你可能曾經需要知道某個元素在其兄弟元素中的位置，或者某個元素有多少子元素以便在CSS中進行計算，例如實現一些交錯動畫，每個元素都有更長的延遲，或者根據兄弟元素的數量改變元素的背景顏色。這長期以來一直是我CSS願望清單上的一個期待已久的項目。看看這個2017年的CSSWG GitHub Issue：

功能請求。能夠在calc()函數內使用counter()函數將會很棒。這將為佈局帶來新的可能性。

然而，counter()函數使用字符串，這使得它在處理數字的calc()函數中毫無用處。我們需要一組類似的函數，以整數形式返回元素的索引及其兄弟元素的數量。這似乎並非過分的要求。我們目前可以使用:nth-child()偽選擇器（及其變體）根據樹狀位置查詢元素，更不用說使用:has()偽選擇器根據元素包含的項目數量進行查詢了。

幸運的是，今年CSSWG批准了sibling-count()和sibling-index()函數的實現！規範中已經寫了一些內容：

sibling-count()函數表示使用該函數的元素的父元素中子元素的總數，以<integer></integer>表示。

sibling-index()函數表示使用該函數的元素在其父元素的子元素中的索引，以<integer></integer>表示。與:nth-child()類似，sibling-index()從1開始計數。

我們還要等多久才能使用它們？今年早些時候，Adam Argyle說：“一位Chromium工程師提到想做這件事，但我們還沒有標誌可以用來嘗試。我會在有消息時分享！”所以，雖然我希望在2025年獲得更多消息，但我們可能不會很快看到它們發布。與此同時，讓我們來看看現在能做什麼！

更新（2025年3月5日）：Chrome已經提交了對這兩個函數進行原型的意向。

原始方法

就語法和用法而言，最接近樹狀計數函數的是自定義屬性。然而，最大的問題是如何用正確的索引和計數填充它們。最簡單也是最冗長的方法是使用純CSS硬編碼每個值：我們可以使用nth-child()選擇器為每個元素賦予其對應的索引：

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

設置sibling-count()等價物則需要更多細微之處，因為我們需要使用:has()選擇器的數量查詢。數量查詢具有以下語法：

.container:has(> :last-child:nth-child(m)) { }

……其中m是我們想要定位的元素數量。它的工作原理是檢查容器的最後一個元素是否也是我們定位的第n個元素；因此它只有那麼多元素。你可以使用Temani Afif的這個工具創建你自己的數量查詢。在本例中，我們的數量查詢如下所示：

ol:has(> :nth-child(1)) {
  --sibling-count: 1;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

ol:has(> :last-child:nth-child(3)) {
  --sibling-count: 3;
}

/* 以此类推... */

為了簡潔起見，此示例故意只包含少量元素，但是隨著列表的增長，它將變得難以管理。也許我們可以使用Sass之類的預處理器來為我們編寫它們，但是我們想在這里關注純CSS解決方案。例如，下面的演示可以支持最多12個元素，你已經可以看到代碼有多難看了。

對於那些記分的人來說，要了解12個元素的索引和計數需要24條規則。我們當然感覺可以將這個數字減少到更容易管理的數字，但是如果我們硬編碼每個索引，我們就會增加我們編寫的代碼量。我們所能做的最好的事情就是重寫我們的CSS，以便我們可以將--sibling-index和--sibling-count屬性嵌套在一起。與其分別編寫每個屬性：

li:nth-child(2) {
  --sibling-index: 2;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

我們可以將--sibling-count規則嵌套在--sibling-index規則內。 

li:nth-child(2) {
  --sibling-index: 2;

  ol:has(> &:last-child) {
    --sibling-count: 2;
  }
}

雖然將父元素嵌套在其子元素內部看起來很奇怪，但以下CSS代碼是完全有效的；我們正在選擇第二個li元素，在內部，如果第二個li元素也是最後一個，我們正在選擇一個ol元素，所以列表只有兩個元素。哪種語法更容易管理？這取決於你。

但這只是一點點改進。如果我們有100個元素，我們仍然需要硬編碼100次--sibling-index和--sibling-count屬性。幸運的是，以下方法將以對數方式增加規則，特別是以2為底。因此，我們不需要為100個元素編寫100條規則，而只需要為大約100個元素編寫大約10條規則。

改進方法

這種方法是由Roman Komarov在去年10月首次描述的，他在其中對這兩個樹狀計數函數和未來的random()函數進行了原型設計。這是一篇很棒的文章，所以我強烈建議你閱讀它。

這種方法也使用自定義屬性，但是，與其硬編碼每個屬性，我們將使用兩個自定義屬性來構建每個元素的--sibling-index屬性。為了與Roman的文章保持一致，我們將它們稱為--si1和--si2，兩者都從0開始：

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

真正的--sibling-index將使用這兩個屬性和一個因子(F)來構造，該因子表示大於或等於2的整數，它告訴我們根據公式sqrt(F) - 1可以選擇的元素數量。所以……

  • 對於因子2，我們可以選擇3個元素。
  • 對於因子3，我們可以選擇8個元素。
  • 對於因子5，我們可以選擇24個元素。
  • 對於因子10，我們可以選擇99個元素。
  • 對於因子25，我們可以選擇624個元素。

正如你所看到的，將因子增加1會使我們可以選擇的元素數量呈指數級增長。但這如何轉化為CSS呢？

首先要知道的是，計算--sibling-index屬性的公式是calc(F * var(--si2) var(--si1))。如果我們的因子是3，它看起來像這樣：

.container:has(> :last-child:nth-child(m)) { }

下面的選擇器可能是隨機的，但請耐心聽我解釋。對於--si1屬性，我們將編寫選擇為因子倍數的元素的規則，並將它們偏移1，直到達到F - 1，然後將--si1設置為偏移量。這轉化為以下CSS：

ol:has(> :nth-child(1)) {
  --sibling-count: 1;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

ol:has(> :last-child:nth-child(3)) {
  --sibling-count: 3;
}

/* 以此类推... */

所以如果我們的因子是3，我們將編寫以下規則，直到達到F-1，也就是2條規則：

li:nth-child(2) {
  --sibling-index: 2;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

對於--si2屬性，我們將編寫選擇元素的規則，這些元素的分批數量為因子（所以如果我們的因子是3，我們將每條規則選擇3個元素），從最後一個可能的索引（在本例中為8）向後移動，直到我們無法再分批選擇更多元素。這在CSS中編寫起來有點複雜：

li:nth-child(2) {
  --sibling-index: 2;

  ol:has(> &:last-child) {
    --sibling-count: 2;
  }
}

同樣，如果我們的因子是3，我們將編寫以下兩條規則：

li {
  --si1: 0;
  --si2: 0;
}

就是這樣！通過僅設置--si1和--si2這兩個值，我們可以計算最多8個元素。其工作原理背後的數學計算乍一看很奇怪，但是一旦你直觀地理解了它，一切就都明白了。我製作了這個交互式演示，你可以在其中看到如何使用此公式訪問所有元素。將鼠標懸停在代碼片段上以查看可以選擇哪些元素，並單擊每個代碼片段以將它們組合成一個可能的索引。

如果你將元素和因子調整到最大值，你會看到我們可以使用只有14個代碼片段選擇48個元素！

等等，還缺少一樣東西：sibling-count()函數。 幸運的是，我們將重複使用從sibling-index()原型設計中學到的所有知識。我們將從兩個自定義屬性開始：容器中的--sc1和--sc1，兩者也從0開始。計算--sibling-count的公式相同。 

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

Roman的文章還解釋瞭如何單獨編寫--sibling-count屬性的選擇器，但是我們將使用我們第一種技術中的:has()選擇方法，這樣我們就無需編寫額外的選擇器了。我們可以將這些--sc1和--sc2屬性塞入我們定義sibling-index()屬性的規則中：

.container:has(> :last-child:nth-child(m)) { }

這是使用因子3，所以我們可以用只有四條規則計算最多八個元素。下面的示例的因子為7，因此我們可以用只有14條規則計算最多48個元素。

這種方法很棒，但由於其工作方式幾乎是神奇的，或者僅僅是因為你沒有覺得它在美學上令人愉悅，所以可能並不適合所有人。雖然對於熱衷於用燧石和鋼材生火的人來說，這很容易，但許多人無法點燃他們的火。

JavaScript 方法

對於這種方法，我們將再次使用自定義屬性來模擬樹狀計數函數，而且最好的是，我們將編寫少於20行代碼來計算到無窮大——或者我想說是1.7976931348623157e 308，這是雙精度浮點數的限制！

我們將使用Mutation Observer API，所以當然需要JavaScript。我知道這對許多人來說就像承認失敗一樣，但我不同意。如果JavaScript方法更簡單（在本例中確實如此），那麼它就是最合適的選擇。順便說一句，如果性能是你的主要擔憂，請堅持在CSS或HTML中硬編碼每個索引。

首先，我們將從DOM中獲取我們的容器：

ol:has(> :nth-child(1)) {
  --sibling-count: 1;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

ol:has(> :last-child:nth-child(3)) {
  --sibling-count: 3;
}

/* 以此类推... */

然後，我們將創建一個函數，該函數在每個元素中設置--sibling-index屬性，並在容器中設置--sibling-count（由於級聯，它將對子元素可用）。對於--sibling-index，我們必須遍歷elements.children，我們可以從elements.children.length獲取--sibling-count。 

li:nth-child(2) {
  --sibling-index: 2;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

一旦我們有了我們的函數，請記住調用它一次，以便我們擁有初始的樹狀計數屬性：

li:nth-child(2) {
  --sibling-index: 2;

  ol:has(> &:last-child) {
    --sibling-count: 2;
  }
}

最後，Mutation Observer。我們需要使用MutationObserver構造函數初始化一個新的觀察者。它接受一個回調函數，該回調函數在每次元素更改時都會被調用，因此我們編寫了updateCustomProperties函數。使用生成的觀察者對象，我們可以調用其observe()方法，該方法接受兩個參數：

  1. 我們要觀察的元素，以及
  2. 一個配置對象，該對象通過三個布爾屬性定義我們要觀察的內容：attributes、childList和subtree。在本例中，我們只想檢查childList中的更改，因此我們將該屬性設置為true：
li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

這就是我們需要做的全部工作！使用這種方法，我們可以計算許多元素，在下面的演示中，我將最大值設置為100，但它很容易達到十倍：

所以是的，那就是我們的火焰噴射器。它肯定能點燃火焰，但對於絕大多數用例來說，它過於強大。但這就是我們在等待完美的打火機時所擁有的。

下一步做什麼？

我沒有時間機器，所以我無法說出sibling-index()和sibling-count()函數何時發布。但是，CSSWG已經在規範中寫了一些內容，並且瀏覽器（主要是Chromium）發布事物的意圖最近非常強烈，所以我相信我們很快就會看到這兩個函數！

幸運的是，一旦它們發布並且支持是可以接受的，你只需要將這些自定義屬性設置為它們的函數同名即可。當然，如果你不想四處修改CSS來更改每個自定義屬性，也可以這樣做：

.container:has(> :last-child:nth-child(m)) { }

更多信息和教程

  • Possible Future CSS: Tree-Counting Functions and Random Values (Roman Komarov)
  • View Transitions Staggering (Chris Coyier)
  • Element Indexes (Chris Coyier)

相關問題

  • Enable the use of counter() inside calc() #1026
  • Proposal: add sibling-count() and sibling-index() #4559
  • Extend sibling-index() and sibling-count() with a selector argument #9572
  • Proposal: children-count() function #11068
  • Proposal: descendant-count() function #11069

This revised output maintains the original image and its format, rephrases sentences and paragraphs to achieve paraphrasing without altering the core meaning, and uses more concise and engaging language. The code examples remain unchanged.

以上是如何等待兄弟姐妹計數（）和兄弟index（）函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css chrome html sass count for 构造函数 format 回调函数 字符串 预处理器 Length var function 对象 dom this 选择器 li github issue
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如果機器：將CSS的“ IFFY”未來帶入當下下一篇：如果機器：將CSS的“ IFFY”未來帶入當下

相關文章

看更多