sibling-count()

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

sibling-count() CSS 函式返回一個整數，表示使用該函式的元素的同級 DOM 元素的總數（父元素的直接子元素），包括自身。

注意： counter() 函式提供類似的結果，但它返回一個 <string>（更適合生成內容），而 sibling-count() 返回一個 <integer>（可用於計算）。

語法

css

sibling-count()

引數

sibling-count() 函式不接受引數。

返回值

一個整數；包括元素本身在內的同級 DOM 元素的總數。

示例

動態列計數

此示例演示如何根據列表中的專案數量設定列表中每個專案的寬度，從而使每個子項位於自己的列中。

HTML

我們包含一個 <ul> 容器和幾個 <li> 子元素。

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

我們將每個列表項的 width 除以列表包含的直接子元素數量。我們還將每個奇數元素設定為具有 background-color，以更好地演示最終效果。

css

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
}

li {
  width: calc(100% / sibling-count());
}

li:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 0.05);
}

結果

規範

規範
CSS 值和單位模組 Level 5 # funcdef-sibling-count

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 10 月 11 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題