::column

可用性有限

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

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

::column CSS 偽元素表示當容器透過CSS 多列布局設定為多列顯示其內容時生成的獨立列。::column 偽元素能夠應用不影響佈局的樣式到這些生成的片段。

語法

css

::column {
  /* ... */
}

描述

當使用 CSS 多列布局將容器內容以多列布局時（例如，使用 column-count 屬性），會生成 ::column 偽元素來包含每個獨立列。

::column 偽元素只接受適用於滾動容器內元素的滾動捕捉屬性，包括 scroll-margin、scroll-snap-align 和 scroll-snap-stop。

::column 偽元素可以有一個 ::scroll-marker 偽元素。其他偽元素，如 ::before 和 ::after，不會在 ::column 上生成。應用 ::column::scroll-marker 會為原始滾動容器的每一列建立一個標記，其中 ::scroll-marker 偽元素繼承自 ::column 偽元素的原始元素，而不是 ::column 本身。

這對於CSS 輪播非常有用——::column 可以用於為每列生成 ::scroll-marker 偽元素，並使用 CSS 滾動捕捉將它們設定為捕捉目標。

雖然可以應用於 ::column 的樣式非常有限，但未來可能會進行擴充套件。未來支援的任何屬性和值都將限於不影響佈局的那些。

示例

滾動列布局

此演示建立一個響應式容器，可將每個“頁面”內容捕捉到位。它使用 columns 屬性和 ::column 偽元素建立內容列，這些列跨越其父滾動容器的整個寬度，並且可以水平滾動。每列包含一個或多個列表項，其數量根據視口寬度而變化。

HTML

HTML 由一個無序列表組成，每個列表項都包含一些示例內容。

html

<ul>
...
  <li>
    <h2>Item 1</h2>
  </li>
...
</ul>

<ul>
  <li>
    <h2>Item 1</h2>
  </li>
  <li>
    <h2>Item 2</h2>
  </li>
  <li>
    <h2>Item 3</h2>
  </li>
  <li>
    <h2>Item 4</h2>
  </li>
  <li>
    <h2>Item 5</h2>
  </li>
  <li>
    <h2>Item 6</h2>
  </li>
  <li>
    <h2>Item 7</h2>
  </li>
  <li>
    <h2>Item 8</h2>
  </li>
  <li>
    <h2>Item 9</h2>
  </li>
  <li>
    <h2>Item 10</h2>
  </li>
  <li>
    <h2>Item 11</h2>
  </li>
  <li>
    <h2>Item 12</h2>
  </li>
  <li>
    <h2>Item 13</h2>
  </li>
  <li>
    <h2>Item 14</h2>
  </li>
  <li>
    <h2>Item 15</h2>
  </li>
</ul>

CSS

該列表被賦予固定的height和100vw的width，使其跨越視口的整個寬度。然後將overflow-x值設定為scroll，以便內容水平滾動，並使用CSS 滾動捕捉來捕捉每個專案或“頁面”——使用x mandatory的scroll-snap-type值將列表變為滾動捕捉容器。最後，將columns值設定為1，強制列表內容顯示為單列。還應用了center的text-align值，將內容與列表的中心對齊。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

css

ul {
  width: 100vw;
  height: 300px;
  padding: 10px;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;
}

然後對列表項進行樣式設定

將 display 值設定為 inline-block，使列表項並排排列並使列表水平滾動。
它們被設定了固定的width和height。
它們被設定為 text-align 值 left，以覆蓋父容器上設定的 text-align: center，從而使專案內容左對齊。
透過:nth-child()，每個偶數列表項都有不同的背景顏色，這樣更容易看到滾動效果。

css

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  width: 200px;
  text-align: left;

  background-color: #eeeeee;
  outline: 1px solid #dddddd;
  padding: 0 20px;
  margin: 0 10px;
}

li:nth-child(even) {
  background-color: cyan;
}

scroll-snap-align 屬性設定在 ::column 偽元素上（表示由 columns 屬性生成的內容列），以便滾動時，列被捕捉到滾動容器的中心。

css

ul::column {
  scroll-snap-align: center;
}

結果

帶滾動標記的基於列的輪播

在前面的示例基礎上，我們將建立滾動標記以實現直接導航到不同的列，方法是將 scroll-marker-group 應用於容器，並將 ::scroll-marker 應用於每個 ::column 偽元素。HTML 保持不變。

CSS

我們使用 scroll-marker-group 屬性建立一個滾動標記組，將該組放置在所有內容之後。

css

ul {
  scroll-marker-group: after;
}

然後，我們對 ::scroll-marker-group 偽元素應用樣式，將滾動標記在行中央佈局，每個標記之間有 0.4em 的間距。

css

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

最後，我們使用 ::scroll-marker 偽元素為每個列表項建立一個帶有黑色邊框的圓形透明標記，然後透過 :target-current 偽類定位當前滾動元素的標記，並使其樣式與其他標記不同。

css

ul::column::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 10px;
}

ul::column::scroll-marker:target-current {
  background-color: black;
}

結果

嘗試按下滾動標記以直接跳轉到每個頁面。請注意當前標記如何突出顯示，以便您可以看到在分頁中的位置。還可以嘗試使用 Tab 鍵切換到滾動標記組，然後使用游標鍵迴圈瀏覽每個頁面。

有關更多輪播示例，請參閱建立 CSS 輪播。

規範

規範
CSS 多列布局模組級別 2 # column-pseudo

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者於2025年10月13日修改。

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