CSS 功能參考資料

這份完整的參考資料列出與查看及變更 CSS 相關的 Chrome 開發人員工具功能，可協助您探索新的工作流程。

如要瞭解基本概念，請參閱「查看及變更 CSS」。

選取元素

您可以使用開發人員工具的「元素」面板，一次查看或變更一個元素的 CSS。

在螢幕截圖中，DOM 樹狀結構中以藍色醒目顯示的 h1 元素，就是所選元素。 右側的「樣式」分頁會顯示元素的樣式。在左側，元素會在可視區域中醒目顯示，但這只是因為滑鼠懸停在 DOM 樹狀結構上。

如需教學課程，請參閱「查看元素的 CSS」。

選取元素的方式有很多種：

• 在檢視區塊中，對元素按一下滑鼠右鍵，然後選取「檢查」。
• 在開發人員工具中，按一下「選取元素」 或按下 Command+Shift+C 鍵 (Mac) 或 Control+Shift+C 鍵 (Windows、Linux)，然後按一下檢視區塊中的元素。
• 在開發人員工具中，按一下 DOM 樹狀結構中的元素。
• 在開發人員工具的「控制台」中執行 document.querySelector('p') 等查詢，在結果上按一下滑鼠右鍵，然後選取「在元素面板中顯示」。

查看 CSS

使用「元素」>「樣式」和「已計算」分頁，查看 CSS 規則並診斷 CSS 問題。

透過連結瀏覽

「樣式」分頁會顯示各種位置的連結，包括但不限於：

• CSS 規則、樣式表和 CSS 來源旁邊。這類連結會開啟「來源」面板。如果 CSS 樣式表經過縮排，請參閱「讓縮排檔案可讀」。
• 在「繼承自...」部分，前往父項元素。
• 在 var() 呼叫中，可宣告自訂屬性。
• 在 animation 簡寫屬性中，將 @keyframes 設為 。
• 說明文件工具提示中的「瞭解詳情」連結。
• 還有其他實用內容，歡迎觀看瞭解。

以下列舉部分重點：

連結的樣式可能有所不同。如果不確定某個項目是否為連結，請點選該項目確認。

查看 CSS 說明文件、特殊性和自訂屬性值的工具提示

「元素」 >「樣式」：將游標懸停在特定元素上時，會顯示含有實用資訊的工具提示。

查看 CSS 說明文件

如要查看含有簡短 CSS 說明的工具提示，請將游標懸停在「樣式」分頁中的屬性名稱上。

按一下「瞭解詳情」，前往 MDN CSS 參考資料，查看這項屬性。

如要關閉工具提示，請勾選「不要顯示」。

如要重新開啟，請依序勾選 「設定」 >「偏好設定」 >「元素」 > 「顯示 CSS 文件工具提示」。

查看選取器特異性

將游標懸停在選取器上，即可查看含有特殊性權重的工具提示。

查看自訂屬性的值

將游標懸停在 --custom-property 上，即可在工具提示中查看值。

查看無效、遭覆寫、無作用和其他 CSS

「樣式」分頁會辨識多種 CSS 問題，並以不同方式醒目顯示。

請參閱「瞭解『樣式』分頁中的 CSS」。

只查看實際套用至元素的 CSS

「樣式」分頁會顯示套用至元素的所有規則，包括已覆寫的宣告。如果您對遭覆寫的宣告不感興趣，請使用「已計算」分頁，只查看實際套用至元素的 CSS。

1. 選取元素。
2. 前往「元素」面板中的「已計算」分頁。

勾選「顯示全部」核取方塊，即可查看所有屬性。

請參閱「瞭解『已計算』分頁中的 CSS」。

依英文字母順序查看 CSS 屬性

使用「已計算」分頁標籤。請參閱「只查看實際套用至元素的 CSS」。

查看繼承的 CSS 屬性

勾選「Computed」分頁中的「Show All」核取方塊。請參閱「只查看實際套用至元素的 CSS」。

或者，捲動「樣式」分頁，找出名為 Inherited from <element_name> 的部分。

查看 CSS at 規則

At 規則是 CSS 陳述式，可供您控制 CSS 行為。「元素」 >「樣式」會在專屬區塊中顯示下列 at 規則：

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

查看 @property at 規則

@property CSS at 規則可讓您明確定義 CSS 自訂屬性，並在 CSS 樣式表中註冊這些屬性，不必執行任何 JavaScript。

將滑鼠游標懸停在「樣式」分頁中的這類屬性名稱上，即可查看屬性值、描述元，以及「樣式」分頁底部可收合的 @property 區段中屬性的註冊連結。

如要編輯 @property 規則，請按兩下規則名稱或值。

查看 @supports at 規則

如果元素套用了 @supports CSS at 規則，「樣式」分頁就會顯示這些規則。舉例來說，請檢查下列元素：

如果瀏覽器支援 lab() 函式，元素會顯示為綠色，否則會顯示為紫色。

查看 @scope at 規則

如果元素套用了 CSS @scope at 規則，「樣式」分頁就會顯示這些規則。

新的 @scope at 規則是 CSS Cascading and Inheritance Level 6 規格的一部分。這些規則可讓您設定 CSS 樣式的範圍，也就是明確將樣式套用至特定元素。

在下列預覽畫面中查看 @scope 規則：

1. 檢查預覽畫面中的資訊卡文字。
2. 在「樣式」分頁中，找出 @scope 規則。

在這個範例中，@scope 規則會針對具有 card 類別的元素內的所有 <p> 元素，覆寫全域 CSS background-color 宣告。

如要編輯 @scope 規則，請按兩下。

查看 @font-palette-values at 規則

@font-palette-values CSS at 規則可讓您自訂 font-palette 屬性的預設值。「元素」 >「樣式」會在專屬區段中顯示這項 at 規則。

在下一個預覽畫面中查看 @font-palette-values 部分：

1. 檢查預覽畫面中的第二行文字。
2. 在「樣式」中，找到 @font-palette-values 區段。

在本範例中，--New 字型調色盤值會覆寫彩色字型的預設值。

如要編輯自訂值，請按兩下。

查看 @position-try at 規則

@position-try CSS 規則和 position-try-options 屬性可讓您定義元素的替代錨點位置。詳情請參閱「推出 CSS 錨點定位 API」。

「元素」 >「樣式」會解析並連結下列項目：

• position-try-options 屬性值移至專屬的 @position-try --name 區段。
• position-anchor 屬性值和 anchor() 引數，對應至具有 popovertarget 屬性的元素。

檢查下一個預覽畫面中的 position-try-options 值和 @position-try 區段：

1. 在預覽畫面中開啟子選單，也就是依序點選「你的帳戶」和「店面」。
2. 在預覽畫面中，使用 id="submenu" 檢查元素。
3. 在「樣式」中，找出 position-try-options 屬性，然後按一下其 --bottom 值。「樣式」分頁會將你帶往對應的 @position-try 區段。
4. 按一下 position-anchor 值連結或相同的 anchor() 引數。「元素」面板會選取具有相應 popovertarget 屬性的元素，「樣式」分頁則會顯示該元素的 CSS。

如要編輯值，請連按兩下。

查看元素的方塊模型

如要查看元素的方塊模型，請前往「樣式」分頁，然後點選動作列中的「顯示側欄」按鈕 。

如要變更值，請按兩下。

搜尋及篩選元素的 CSS

在「樣式」和「已計算」分頁的「篩選器」方塊中，搜尋特定 CSS 屬性或值。

如要在「已計算」分頁中搜尋繼承的屬性，請勾選「顯示全部」核取方塊。

如要瀏覽「已計算」分頁，請勾選「群組」，將篩選後的屬性歸入可收合的類別。

模擬已聚焦的網頁

如果您將焦點從網頁切換至開發人員工具，系統會自動隱藏焦點觸發的部分疊加元素。例如下拉式清單、選單或日期挑選器。勾選「模擬已聚焦的網頁」check_box選項，即可模擬元素處於焦點狀態，方便您進行偵錯。

請在這個示範頁面上模擬已聚焦的網頁：

1. 將焦點移至輸入元素。下方會顯示另一個元素。
2. 開啟開發人員工具。現在焦點位於開發人員工具視窗，而非頁面，因此元素會再次消失。
3. 在「元素」 >「樣式」中，按一下「:hov」，勾選「模擬焦點網頁」check_box，並確認已選取輸入元素。現在可以檢查該元素下方的元素。

您也可以在「Rendering」面板中找到相同選項。

如要瞭解凍結元素的其他方法，請參閱「凍結畫面並檢查消失的元素」。

切換虛擬類別

如要切換虛擬類別，請按照下列步驟操作：

1. 選取元素。
2. 在「元素」面板中，前往「樣式」分頁。
3. 按一下「:hov」。
4. 勾選要開啟的虛擬類別。

在本範例中，您可以看到即使元素實際上並未懸停，開發人員工具仍會將 background-color 宣告套用至元素。

「樣式」分頁會顯示所有元素的下列虛擬類別：

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

此外，部分元素可能會有自己的虛擬類別。選取這類元素時，「樣式」分頁會顯示「強制特定元素狀態」區段，展開後即可開啟特定於該元素的虛擬類別。

如需互動式教學課程，請參閱「為類別新增偽狀態」。

查看沿用的醒目顯示虛擬元素

虛擬元素可讓您設定元素的特定部分樣式。醒目顯示的虛擬元素是「已選取」狀態的文件部分，樣式為「醒目顯示」，向使用者表明這個狀態。例如 ::selection、::spelling-error、::grammar-error 和 ::highlight 等虛擬元素。

如規格所述，如果多個樣式發生衝突，層疊會決定勝出的樣式。

如要進一步瞭解規則的優先順序和繼承，您可以查看繼承的醒目顯示虛擬元素：

1. 檢查下方的文字。

   我繼承了父項的螢光筆偽元素樣式。選我！

2. 選取上方文字的一部分。

3. 在「樣式」分頁中向下捲動，找出 Inherited from ::selection pseudo of... 區段。

查看層疊層

疊層可讓您更明確地控管 CSS 檔案，避免樣式特異性衝突。這項功能適用於大型程式碼集、設計系統，以及在應用程式中管理第三方樣式。

如要查看疊層，請檢查下一個元素，然後依序開啟「元素」 >「樣式」。

在「樣式」分頁中，查看 3 個層疊層及其樣式：page、component 和 base。

如要查看圖層順序，請按一下圖層名稱或「切換 CSS 圖層檢視畫面」按鈕 。

page 層的具體性最高，因此元素的背景為綠色。

在列印模式中查看頁面

如要以列印模式查看網頁，請按照下列步驟操作：

1. 開啟指令選單。
2. 開始輸入 Rendering 並選取 Show Rendering。
3. 在「模擬 CSS 媒體」下拉式選單中，選取「print」。

使用「涵蓋範圍」分頁查看已用和未用的 CSS

「涵蓋範圍」分頁會顯示網頁實際使用的 CSS。

1. 在開發人員工具處於焦點時，按下 Command+Shift+P 鍵 (Mac) 或 Control+Shift+P 鍵 (Windows、Linux、ChromeOS)，即可開啟指令選單。

2. 開始輸入 coverage。

   

3. 選取「顯示涵蓋範圍」。系統會顯示「涵蓋範圍」分頁。

   

4. 按一下「重新載入」。 頁面會重新載入，而「涵蓋範圍」分頁會提供總覽資訊，說明瀏覽器載入的每個檔案中，有多少 CSS (和 JavaScript) 遭到使用。

   

   綠色代表已使用的 CSS。紅色代表未使用的 CSS。

5. 按一下 CSS 檔案，即可在上方預覽畫面中，逐行查看該檔案使用的 CSS。

   

   在螢幕截圖中，devsite-google-blue.css 的第 55 至 57 行和第 65 至 67 行未使用，而第 59 至 63 行則已使用。

強制進入列印預覽模式

請參閱「強制開發人員工具進入列印預覽模式」。

複製 CSS

在「樣式」分頁的單一下拉式選單中，您可以複製個別的 CSS 規則、宣告、屬性、值

此外，您也可以複製 JavaScript 語法的 CSS 屬性。如果您使用 CSS-in-JS 程式庫，這個選項就非常實用。

如要複製 CSS：

1. 選取元素。
2. 在「元素」 >「樣式」分頁中，對 CSS 屬性按一下滑鼠右鍵。

3. 從下拉式選單中選取下列其中一個選項：

   • 複製聲明。以 CSS 語法複製屬性和值： css property: value;
   • 複製屬性。只會複製 property 名稱。
   • 複製值。只複製 value。
   • 複製規則。複製整個 CSS 規則： css selector[, selector] { property: value; property: value; ... }
   • 以 JS 格式複製宣告內容。以 JavaScript 語法複製屬性和值： js propertyInCamelCase: 'value'
   • 複製所有宣告。複製 CSS 規則中的所有屬性和值： css property: value; property: value; ...

   • 以 JS 格式複製全部宣告內容。以 JavaScript 語法複製所有屬性及其值： ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • 複製所有 CSS 變更內容。將您在「樣式」分頁中進行的變更複製到所有宣告。

   • 查看已運算的值。前往「已計算」分頁。

變更 CSS

本節列出在「元素」 >「樣式」中變更 CSS 的所有方式。

此外，你還可以：

• 在網頁載入時覆寫 CSS。
• 將修改後的 CSS 儲存至工作區的本機來源。

使用程式碼自動完成功能變更 CSS

如要試用更複雜的 CSS 屬性組合 (例如漸層或方塊陰影)，但不想記住確切的語法，或是想快速建構格線和彈性版面配置，但需要使用多個相關屬性，可以開始輸入 CSS 屬性並使用程式碼自動完成功能。

為元素新增 CSS 宣告

由於宣告順序會影響元素的樣式設定方式，因此您可以透過下列不同方式新增宣告：

• 新增內嵌宣告。相當於在元素的 HTML 中加入 style 屬性。
• 在樣式規則中新增宣告。

您應該使用哪種工作流程？在大多數情況下，您可能想使用內嵌宣告工作流程。內嵌宣告的明確度高於外部宣告，因此內嵌工作流程可確保變更在元素中生效，符合您的預期。如要進一步瞭解特殊性，請參閱「選取器類型」。

如果您要對元素的樣式進行偵錯，並需要測試在不同位置定義宣告時會發生什麼情況，請使用其他工作流程。

新增內嵌宣告

如要新增內嵌宣告，請按照下列步驟操作：

1. 選取元素。
2. 在「樣式」分頁中，點選「element.style」區段的括號之間。游標會聚焦，方便你輸入文字。
3. 輸入屬性名稱，然後按下 Enter 鍵。

4. 輸入該屬性的有效值，然後按下 Enter 鍵。在「DOM Tree」中，您可以看到元素已新增 style 屬性。

   

   在螢幕截圖中，margin-top 和 background-color 屬性已套用至所選元素。在 DOM 樹狀結構中，您可以看到元素 style 屬性中反映的宣告。

在樣式規則中新增宣告

如要將宣告新增至現有樣式規則，請按照下列步驟操作：

1. 選取元素。
2. 在「樣式」分頁中，按一下要新增宣告的樣式規則方括號之間。游標會聚焦，方便你輸入文字。
3. 輸入屬性名稱，然後按下 Enter 鍵。
4. 輸入該屬性的有效值，然後按下 Enter 鍵。

在螢幕截圖中，樣式規則會取得新的 border-bottom-style:groove 宣告。

變更聲明名稱或值

按兩下宣告的名稱或值即可變更。如要瞭解如何使用快速鍵以 0.1、1、10 或 100 個單位快速遞增或遞減值，請參閱「使用鍵盤快速鍵變更可列舉的值」。

使用鍵盤快速鍵變更可列舉的值

編輯宣告的可列舉值 (例如 font-size) 時，您可以使用下列鍵盤快速鍵，以固定量遞增值：

• 按 Option+向上鍵 (Mac) 或 Alt+向上鍵 (Windows、Linux)，即可每次增加 0.1。
• 向上：將值變更 1，或變更 0.1 (如果目前值介於 -1 和 1 之間)。
• Shift+向上鍵可將值增加 10。
• Shift+Command+上 (Mac) 或 Control+Shift+Page Up (Windows、Linux) 鍵，即可將值增加 100。

遞減也適用。只要將先前提及的每個 Up 例項替換為 Down 即可。

變更長度值

你可以使用指標變更任何具有長度的屬性，例如寬度、高度、邊框間距、邊界或邊框。

如要變更長度單位，請按照下列步驟操作：

1. 將游標懸停在單元名稱上，你會發現該名稱已加上底線。

2. 按一下單位名稱，從下拉式選單中選取單位。

如要變更長度值，請按照下列步驟操作：

1. 將游標懸停在單位值上，你會發現游標變成水平雙向箭頭。

2. 水平拖曳即可調高或調低值。

如要以 10 為單位調整值，請在拖曳時按住 Shift 鍵。

為元素新增類別

如要將類別新增至元素：

1. 在 DOM 樹狀結構中選取元素。
2. 按一下「.cls」。
3. 在「新增課程」方塊中輸入課程名稱。
4. 按下 Enter 鍵。

模擬淺色和深色主題偏好設定，並啟用自動深色模式

如要切換自動深色模式，或模擬使用者偏好的淺色或深色主題，請按照下列步驟操作：

1. 在「元素」>「樣式」分頁中，按一下「切換常見的算繪模擬」。

2. 從下拉式清單中選取下列其中一個選項：

   • prefers-color-scheme: light。表示使用者偏好淺色主題。
   • prefers-color-scheme: dark。表示使用者偏好深色主題。
   • 自動深色模式。即使您未實作深色模式，系統也會以深色模式顯示網頁。此外，系統也會自動將 prefers-color-scheme 設為 dark。

這個下拉式選單是「算繪」分頁的「模擬 CSS 媒體功能」prefers-color-scheme和「啟用自動深色模式」選項的捷徑。

切換課程

如要啟用或停用元素上的類別，請按照下列步驟操作：

1. 在 DOM 樹狀結構中選取元素。
2. 開啟「元素類別」部分。請參閱「為元素新增類別」。「新增類別」方塊下方會顯示套用至這個元素的所有類別。
3. 勾選或取消勾選要啟用或停用的課程旁邊的核取方塊。

新增樣式規則

如要新增樣式規則，請按照下列步驟操作：

1. 選取元素。
2. 按一下「新增樣式規則」 。開發人員工具會在 element.style 規則下方插入新規則。

在螢幕截圖中，點選「New Style Rule」(新增樣式規則) 後，開發人員工具會新增 h1.devsite-page-title 樣式規則。

選擇要新增規則的 CSS 樣式表

新增樣式規則時，請按住「New Style Rule」(新樣式規則) ，然後選擇要將樣式規則新增至哪個 CSS 樣式表。

切換聲明

如要開啟或關閉單一聲明，請按照下列步驟操作：

1. 選取元素。
2. 在「樣式」分頁中，將滑鼠游標懸停在定義聲明的規則上。每個聲明旁邊都會顯示核取方塊。
3. 勾選或取消勾選聲明旁的核取方塊。清除宣告後，開發人員工具會將其劃掉，表示該宣告已失效。

在螢幕截圖中，目前所選元素的 color 屬性已切換為關閉。

在動畫期間編輯 ::view-transition 虛擬元素

請參閱「動畫」中的對應章節。

詳情請參閱「使用 View Transitions API 實現流暢簡單的轉場效果」。

使用格線編輯器對齊格線項目及其內容

請參閱「檢查 CSS 格線」一節。

使用顏色挑選器變更顏色

請參閱「使用顏色挑選器檢查及偵錯 HD 和非 HD 顏色」。

使用角度時鐘變更角度值

角度時鐘提供 GUI，可變更 CSS 屬性值中的 <angle>。

如要開啟「角度時鐘」，請按照下列步驟操作：

1. 選取含有角度宣告的元素。

2. 在「樣式」分頁中，找出要變更的 transform 或 background 宣告。 按一下角度值旁邊的「角度預覽」方塊。

   

   -5deg 和 0.25turn 左側的小時鐘是角度預覽畫面。

3. 按一下預覽畫面即可開啟「角度時鐘」。

   

4. 按一下「角度時鐘」圓圈，或捲動滑鼠，即可變更角度值，每次增加 / 減少 1。

5. 還有更多鍵盤快速鍵可變更角度值。詳情請參閱樣式窗格鍵盤快速鍵。

使用陰影編輯器變更方塊和文字陰影

陰影編輯器提供 GUI，可變更 text-shadow 和 box-shadow CSS 宣告。

如要使用陰影編輯器變更陰影：

1. 選取含有陰影宣告的元素。例如，選取下一個元素。

2. 在「樣式」分頁中，找出 text-shadow 或 box-shadow 宣告旁的陰影 圖示。

   

3. 按一下陰影圖示，開啟「陰影編輯器」。

   

4. 變更陰影屬性：

   • 「類型」 (僅適用於 box-shadow)。選擇「Outset」或「Inset」。
   • X 和 Y 位移。拖曳藍點或指定值。
   • 模糊。拖曳滑桿或指定值。
   • 擴展 (僅適用於 box-shadow)。拖曳滑桿或指定值。

5. 觀察套用至元素的變更。

使用「加/減速編輯器」編輯動畫和轉場效果的時間

「加/減速編輯器」提供 GUI，可變更 transition-timing-function 和 animation-timing-function 的值。

如要開啟「Easing Editor」(緩和效果編輯器)，請按照下列步驟操作：

1. 選取含有時間函式宣告的元素，例如這個頁面上的 <body> 元素。
2. 在「樣式」分頁中，找出 transition-timing-function、animation-timing-function 宣告或 transition 簡寫屬性旁的紫色 圖示。
3. 按一下圖示即可開啟「緩和效果編輯器」：

使用預設值調整時間

如要按一下即可調整時間軸，請使用「加/減速編輯器」中的預設設定：

1. 在「Easing Editor」(緩和效果編輯器) 中，如要設定關鍵字值，請按一下其中一個選擇器按鈕：
   • linear
   • ease-in-out
   • ease-in
   • ease-out

2. 在「預設集切換器」中，按一下 或 按鈕，選取下列其中一個預設集：

   • 線性預設：elastic、bounce 或 emphasized。
   • 三次方貝茲預設集：

時間關鍵字	預設	立方貝茲曲線
先加速後減速	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	漸入漸出、二次方	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	漸入漸出，三次方	cubic-bezier(0.65, 0.05, 0.36, 1)
	快速淡出，緩慢淡入	cubic-bezier(0.4, 0, 0.2, 1)
	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)
加速	In、Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In、Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In、Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Fast Out、Linear In	cubic-bezier(0.4, 0, 1, 1)
減速	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Out、Quadratic	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	線性輸出，緩慢輸入	cubic-bezier(0, 0, 0.2, 1)
	外出、返回	cubic-bezier(0.18, 0.89, 0.32, 1.28)

設定自訂時間

如要為時間函式設定自訂值，請使用線上的控制點：

• 如果是線性函式，請點選線上的任一處，新增控制點並拖曳。按兩下即可移除點。

  

• 如果是三次方貝茲函式，請拖曳其中一個控制點。

  

任何變更都會在編輯器頂端的「預覽」中觸發球體動畫。

(實驗功能) 複製 CSS 變更

啟用這項實驗後，「樣式」分頁會以綠色醒目顯示 CSS 變更。

如要複製單一 CSS 宣告變更，請將滑鼠游標懸停在醒目顯示的宣告上，然後按一下「複製」按鈕 。

如要一次複製所有宣告的 CSS 變更內容，請在任一宣告上按一下滑鼠右鍵，然後選取「複製所有 CSS 變更內容」。

此外，您也可以透過「變更」分頁標籤追蹤變更。