CSS 功能參考資料

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

參閱這份 Chrome 開發人員工具功能的全方位參考資料，瞭解與檢視及變更 CSS 相關的全新工作流程。

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

選取元素

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

在螢幕截圖中，您在「DOM Tree」中以藍色醒目顯示的 h1 元素為已選取的元素。元素右側的「樣式」分頁會顯示該元素的樣式。元素左側會在可視區域中醒目顯示，但前提是滑鼠懸停在「DOM 樹狀結構」中的值上。

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

選取元素的方法很多：

• 在可視區域中，在元素上按一下滑鼠右鍵，然後選取「檢查」。
• 在開發人員工具中按一下「Select an element」，或按下 Command + Shift + C (Mac) 或 Control + Shift + C (Windows、Linux)，然後在可視區域中點選元素。
• 在開發人員工具中，按一下「DOM 樹狀結構」中的元素。
• 在開發人員工具中，在「Console」中執行類似 document.querySelector('p') 的查詢，在結果上按一下滑鼠右鍵，然後選取「Reveal in Elements」面板。

查看 CSS

依序前往「Elements」 >「Styles」和「Computed」分頁，查看 CSS 規則及診斷 CSS 問題。

使用連結進行瀏覽

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

• 在 CSS 規則旁邊，找到樣式表和 CSS 來源。這類連結會開啟「來源」面板。如果樣式表經過壓縮，請參閱「將壓縮檔設為容易讀取」一節。
• 在「沿用來源：...」部分中，設定至父項元素。
• 在 var() 呼叫中，對自訂屬性宣告。
• 在 animation 簡寫屬性中，目的地為 @keyframes。
• 瞭解詳情說明文件工具提示中的連結。
• 還能使用更多其他功能。

以下是部分標示：

連結樣式可能會有所不同。如果不確定是否有連結，可以點選連結查看。

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

「Elements」(元素) >「Styles」(樣式) 會在遊標移到特定元素上時，顯示含有實用資訊的工具提示。

查看 CSS 說明文件

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

注意：開發人員工具會從 VS Code Custom Data 提取工具提示的說明。

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

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

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

查看選取器特性

將滑鼠遊標懸停在選取器上，即可查看含「特許」權重的工具提示。

查看自訂屬性的值

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

查看無效、已覆寫、已停用和其他 CSS

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

請參閱在「樣式」分頁中瞭解 CSS 一文。

僅查看實際套用至特定元素的 CSS

「Styles」分頁會顯示套用至元素的所有規則，包括已覆寫的宣告。如果不再需要覆寫的宣告，您可以透過「Computed」分頁，只查看實際套用至特定元素的 CSS。

1. 選取元素。
2. 前往「Elements」面板中的「Computed」分頁。

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

請參閱「運算」分頁中的 CSS。

依字母順序查看 CSS 屬性

使用「Computed」分頁。請參閱「僅查看實際套用至特定元素的 CSS」一文。

查看沿用的 CSS 屬性

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

或者，您也可以捲動「Styles」分頁，找出名為 Inherited from <element_name> 的部分。

查看 CSS at-rules

At-rules 是 CSS 陳述式，可用於控制 CSS 行為。「Elements」(元素) >「Styles」(樣式) 會在專屬區段中顯示下列 at-規則：

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

查看 @property 規則

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

在「Styles」分頁中，將滑鼠遊標懸停在這類屬性的名稱上，即可查看包含屬性值、描述元與註冊連結的工具提示，位於「樣式」分頁底部的可收合 @property 部分。

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

查看 @supports 規則

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

如果您的瀏覽器支援 lab() 函式，元素會呈現綠色，否則為紫色。

注意：撰寫本文時，只有 Safari 支援 CIELAB 色域。

查看 @scope 規則

如果已套用至元素，「Styles」分頁就會顯示 CSS @scope at-rules。

新的 @scope at-rules 是 CSS 階層與沿用等級 6 規格的一部分。這些規則可讓您限定 CSS 樣式範圍，換句話說，您可以明確將樣式套用至特定元素。

注意：@scope at-rule 功能處於實驗階段，如要進行測試，請在 chrome://flags/#enable-experimental-web-platform-features 中啟用「Experimental Web Platform features」旗標。否則下一個預覽將無法運作。

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

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

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

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

查看 @font-palette-values 規則

@font-palette-values CSS at-rule 可讓您自訂 font-palette 屬性的預設值。「Elements」(元素) >「Styles」(樣式) 會在專屬區段顯示 at-rule。

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

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

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

如要修改自訂值，請在這些值上按兩下。

查看元素的方塊模型

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

如要變更值，請在值上按兩下。

搜尋及篩選元素的 CSS

在「Styles」和「Computed」分頁中，使用「Filter」方塊搜尋特定 CSS 屬性或值。

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

如要瀏覽「運算」分頁，請勾選「群組」，將經過篩選的屬性歸類至可收合的類別。

模擬已聚焦的網頁

將焦點從頁面切換到開發人員工具時，有些疊加層元素是由焦點觸發時會自動隱藏。例如下拉式清單、選單或日期挑選器。check_box 「模擬聚焦的網頁」選項可讓您對目前聚焦的元素進行偵錯。

注意： 啟用這個選項時，document.visibilityState 會設為 visible，且 visibilitychange 事件不會觸發。詳情請參閱 Page Visibility API。

請嘗試在這個示範頁面模擬焦點網頁：

1. 將焦點移至輸入元素。下方隨即會顯示另一個元素。
2. 開啟開發人員工具。開發人員工具視窗現在位於焦點所在，而不是頁面，因此元素會再次消失。
3. 在「Elements」(元素) >「Styles」(樣式) 中，按一下「:hov」，並勾選「check_box」check_box「Emulate aFocus page」，並確認已選取的輸入內容元素。您現在可以檢查其下方的元素。

你也可以在「顯示」面板中找到同一個選項。

切換虛擬類別

切換虛擬類別，例如 :active、:focus、:focus-within、:target、:hover、:visited 或 focus-visible：

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

在可視區域中，您可以看到開發人員工具將 background-color 宣告套用至元素，即使元素實際上並未懸停在元素上，

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

查看沿用的精華虛擬元素

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

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

注意：如要啟用這項功能，請使用 --enable-blink-features=HighlightInheritance 旗標執行 Chrome。

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

1. 檢查下方文字。

   我沿用父項醒目顯示虛擬元素的樣式。選取我！

2. 選取上方文字中的一段文字。

3. 在「Styles」(樣式) 分頁中，向下捲動並找到 Inherited from ::selection pseudo of... 部分。

查看層疊式圖層

Cascade 圖層可讓您更明確地控管 CSS 檔案，避免樣式特權衝突。適用於大型程式碼集、設計系統，以及在應用程式中管理第三方樣式時，相當實用。

如要查看階層式圖層，請inspect下一個元素，然後開啟「元素」 >「樣式」。

在「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. 按一下 「Reload」(重新載入)。 頁面會重新載入，「涵蓋範圍」分頁則概略說明瀏覽器載入的每個檔案中所使用的 CSS (和 JavaScript) 使用量。

   

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

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

   

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

強制列印預覽模式

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

複製 CSS

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

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

如何複製 CSS：

1. 選取元素。
2. 在「Elements」(元素) >「Styles」(樣式) 分頁中，在 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 變更內容。在所有宣告的「Styles」分頁中複製變更。

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

變更 CSS

本節列出了變更 CSS 的所有方式，只要依序前往「元素」 >「樣式」即可。

此外，您還可以：

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

在元素中新增 CSS 宣告

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

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

應使用何種工作流程？在大部分情況下，您可能需要使用內嵌宣告工作流程。內嵌宣告的具體程度比外部宣告高，因此內嵌工作流程可確保變更在元素中生效。如要進一步瞭解明確性，請參閱「選取器類型」一文。

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

新增內嵌宣告

如何新增內嵌宣告：

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

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

   

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

在樣式規則中新增宣告

如何在現有樣式規則中新增宣告：

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

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

變更宣告名稱或值

按兩下宣告的名稱或值，即可進行變更。如需快速以 0.1、1、10 或 100 為單位遞增或減弱某個值，請參閱「透過鍵盤快速鍵變更可列舉的值」。

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

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

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

減少同樣情況也沒問題。只要將先前提及的 Up 執行個體替換為 Down。

變更長度值

已淘汰： 這項功能已在 Chrome 123 版中淘汰。如要暫時重新開啟，請清除設定 > 實驗 > check_box 在「樣式」分頁中淘汰 CSS <length> 編寫工具。歡迎前往 crbug/1522657 提供意見回饋。

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

如何變更長度單位：

1. 將滑鼠遊標懸停在單元名稱上，即可看到加上底線。

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

如何變更長度值：

1. 將滑鼠遊標懸停在單位值上，您會發現遊標變更為水平雙頭箭頭。

2. 水平拖曳即可增加或減少值。

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

在元素中新增類別

如何為元素新增類別：

1. 在「DOM 樹狀結構」中選取元素。
2. 按一下「.cls」.cls。
3. 在「Add New Class」方塊中輸入類別名稱。
4. 按下 Enter 鍵。

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

如何切換自動深色模式，或模擬使用者的淺色或深色主題偏好設定：

1. 在「Elements」(元素) >「Styles」(樣式) 分頁中，按一下「ToggleCommon 轉譯模擬」(切換常見轉譯模擬方法)。

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

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

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

切換課程

如何啟用或停用特定元素的類別：

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

新增樣式規則

如何新增樣式規則：

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

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

選取要新增規則的樣式表

新增樣式規則時，點選並按住「New Style Rule」(新增樣式規則) ，選擇要新增樣式規則的樣式表。

切換宣告

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

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

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

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

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

詳情請參閱「使用 View Transitions API 進行流暢和簡單的轉換」。

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

請參閱檢查 CSS 格線中的對應部分。

使用顏色挑選器變更顏色

請參閱「使用顏色挑選器檢查 HD 高畫質和非 HD 高畫質色彩，並進行偵錯」。

使用角度時鐘變更角度值

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

開啟「角度時鐘」：

1. 使用角度宣告選取元素。

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

   

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

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

   

4. 按一下「角度時鐘」圓圈或滑鼠滾輪來增加 / 減少角度值，以變更角度值。

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

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

陰影編輯器提供用於變更 text-shadow 和 box-shadow CSS 宣告的 GUI。

如何使用「陰影編輯器」變更陰影：

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

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

   

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

   

4. 變更陰影屬性：

   • Type (僅適用於 box-shadow)。選擇「Outset」或「Inset」。
   • X 和 Y 軸偏移。拖曳藍點或指定值。
   • 模糊處理：拖曳滑桿或指定值。
   • Spread (僅適用於 box-shadow)。拖曳滑桿或指定值。

5. 查看已套用至元素的變更。

使用 Easing 編輯器編輯動畫和轉場時間

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

如何開啟「Easing Editor」：

1. 選取含有時間函式宣告的元素，例如頁面上的 <body> 元素。
2. 在「Styles」分頁中，找到 transition-timing-function、animation-timing-function 宣告或 transition 簡寫屬性旁的紫色 圖示。
3. 按一下圖示開啟「Easing Editor」：

使用預設設定調整時間

如要透過點選的方式調整時間，請使用「加/減速編輯器」中的預設選項：

1. 如要在「Easing Editor」設定關鍵字值，請按一下其中一個挑選器按鈕：
   • 線性
   • 先前啟動
   • 便捷
   • 爆發

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

   • 線性預設設定：elastic、bounce 或 emphasized。
   • 立方貝茲預設：

時間關鍵字	預設	古巴貝茲
先加速後減速	走出路 (正弦)	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)
	走進室裡	cubic-bezier(0.68, -0.55, 0.27, 1.55)
加速	入、正弦	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)
	入鏡	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	快轉，線性	cubic-bezier(0.4, 0, 1, 1)
減速	外出 (正弦)	cubic-bezier(0.39, 0.58, 0.57, 1)
	離開 (二次)	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	逃出, 立體	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)

設定自訂時間

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

• 針對線性函式，請點選線條中的任何位置新增控制點，然後拖曳。按兩下則可移除這個點。

  

• 如要使用 Cubic Bezier 函式，請拖曳其中一個控制點，

  

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

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

注意：如要啟用這項實驗功能，請依序前往「設定」>「實驗」，然後在「樣式」分頁中勾選「在樣式分頁中同步處理 CSS 變更」，然後重新載入開發人員工具。

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

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

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

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