CSS 功能參考資料

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

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

選取元素

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

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

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

您可以透過多種方式選取元素：

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

查看 CSS

使用「Elements」 >「Styles」和「Computed」分頁，查看 CSS 規則並診斷 CSS 問題。

透過連結瀏覽資料

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

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

以下列舉幾個重點：

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

查看工具提示，瞭解 CSS 說明文件、特異性和自訂屬性值

將滑鼠游標懸停在特定元素上時，「Elements」 >「Styles」會顯示工具提示，提供實用資訊。

查看 CSS 說明文件

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

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

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

如要重新啟用，請依序前往 「設定」 >「偏好設定」 >「元素」 > 「顯示 CSS 說明文件工具提示」。

查看選取器特異性

將游標懸停在「樣式」分頁中的選取器上 (包括巢狀 CSS 規則中的父項選取器、繼承的巢狀規則和 @nested-declarations 規則)，即可查看工具提示，瞭解選取器的優先權權重，並醒目顯示檢視區塊中相符的元素。

查看自訂屬性的值

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

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

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

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

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

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

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

勾選「Show All」核取方塊，即可查看所有屬性。

請參閱「瞭解『已計算』分頁中的 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-rule 可讓您明確定義 CSS 自訂屬性，並在樣式表中註冊，不需執行任何 JavaScript。

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

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

查看 @supports at 規則

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

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

查看 @scope 條 at 規則

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

新的 @scope at 規則是 CSS 階層和繼承層級 6 規格的一部分。這些規則可讓你限定 CSS 樣式的範圍，也就是明確將樣式套用至特定元素。

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

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

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

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

查看 @font-palette-values 條 at 規則

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

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

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

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

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

查看 @position-try 條 at 規則

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

「Elements」 >「Styles」會解析並連結下列項目：

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

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

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

如要編輯值，請按兩下。

查看元素的方塊模型

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

如要變更值，請按兩下。

搜尋及篩選元素的 CSS

在「樣式」和「已計算」分頁的「篩選器」方塊中，搜尋特定 CSS 選取器 (包括巢狀規則中的父項選取器)、屬性或值。

如要一併搜尋「Computed」分頁中的繼承屬性，請勾選「Show All」核取方塊。

如要瀏覽「Computed」分頁，請勾選「Group」，將篩選出的屬性分組到可收合的類別中。

模擬已聚焦的網頁

如果將焦點從頁面切換到開發人員工具，某些由焦點觸發的疊加元素會自動隱藏。例如下拉式選單、選單或日期挑選器。check_box「Emulate a focused page」選項可讓您對這類元素進行偵錯，就像元素處於聚焦狀態一樣。

請在這個試用頁面模擬已聚焦的網頁：

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

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

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

切換虛擬類別

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

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

在這個範例中，您可以看到 DevTools 將 background-color 宣告套用至元素，即使元素實際上並未懸停。

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

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

此外，部分元素可能有自己的虛擬類別。選取這類元素時，「Styles」分頁會顯示「Force specific element state」部分，您可以展開該部分，並開啟元素專屬的虛擬類別。

如需互動式教學課程，請參閱「在類別中新增虛擬狀態」。

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

虛擬元素可讓您設定元素特定部分的樣式。醒目顯示虛擬元素是處於「已選取」狀態的文件部分，並會以「醒目顯示」樣式呈現，向使用者表示此狀態。例如 ::selection、::spelling-error、::grammar-error 和 ::highlight。

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

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

1. 檢查下方的文字。

   我繼承了父項的螢光筆醒目顯示虛擬元素樣式。選我！

2. 選取上方部分文字。

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

查看階層式圖層

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

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

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

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

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

在列印模式中查看頁面

如要在列印模式中查看頁面，請按照下列步驟操作：

1. 開啟「命令選單」。
2. 開始輸入 Rendering，然後選取「Show Rendering」。
3. 在「Emulate CSS Media」下拉式選單中，選取「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 變更內容。複製您在「樣式」分頁中對所有宣告所做的變更。

   • 查看自動計算值。前往「Computed」分頁。

變更 CSS

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

此外，你還可以：

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

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

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

為元素新增 CSS 宣告

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

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

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

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

新增內嵌宣告

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

1. 選取元素。
2. 在「Styles」分頁中，按一下「element.style」部分括號之間的位置。游標會聚焦，方便您輸入文字。
3. 輸入屬性名稱，然後按下 Enter 鍵。

4. 輸入該屬性的有效值，然後按下 Enter 鍵。在 DOM 樹狀結構中，您會看到元素已新增 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. 在「Add New Class」方塊中輸入類別名稱。
4. 按下 Enter 鍵。

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

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

1. 在「Elements」 >「Styles」分頁中，按一下「Toggle common rendering emulations」。

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

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

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

切換類別

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

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

新增樣式規則

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

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

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

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

新增樣式規則時，點選並按住「New Style Rule」，選擇要將樣式規則新增至哪個 CSS 樣式表。

切換聲明

如要開啟或關閉單一宣告：

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

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

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

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

詳情請參閱「使用 View Transitions API 順暢輕鬆地轉換」。

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

請參閱「檢查 CSS 格線」中的對應章節。

使用顏色挑選器變更顏色

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

使用角度時鐘變更角度值

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

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

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

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

   

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

3. 按一下預覽畫面，開啟 Angle Clock。

   

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

5. 您可以使用更多鍵盤快速鍵變更角度值。詳情請參閱「『樣式』窗格鍵盤快速鍵」。

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

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

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

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

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

   

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

   

4. 變更陰影屬性：

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

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

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

Easing Editor 提供 GUI，可用於變更 transition-timing-function 和 animation-timing-function 的值。

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

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

使用預設設定調整時間

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

1. 在緩動編輯器中，如要設定關鍵字值，請按一下其中一個挑選器按鈕：
   • linear
   • ease-in-out
   • 加速
   • ease-out

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

   • 線性預設：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)
	In Out, Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	快速淡出、慢速淡入	cubic-bezier(0.4, 0, 0.2, 1)
	進出、返回	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)
	立方英吋	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In、Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	快速淡出，線性淡入	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)
	Out, Back	cubic-bezier(0.18, 0.89, 0.32, 1.28)

設定自訂時間

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

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

  

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

  

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

(實驗功能) 複製 CSS 變更內容

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

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

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

此外，您也可以使用「變更」分頁追蹤變更。