這份完整的參考資料列出與查看及變更 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。
- 選取元素。
- 前往「元素」面板中的「已計算」分頁。
勾選「顯示全部」核取方塊，即可查看所有屬性。
請參閱「瞭解『已計算』分頁中的 CSS」。
依英文字母順序查看 CSS 屬性
使用「已計算」分頁標籤。請參閱「只查看實際套用至元素的 CSS」。
查看繼承的 CSS 屬性
勾選「Computed」分頁中的「Show All」核取方塊。請參閱「只查看實際套用至元素的 CSS」。
或者，捲動「樣式」分頁，找出名為 Inherited from <element_name> 的部分。
查看 CSS at 規則
At 規則是 CSS 陳述式，可供您控制 CSS 行為。「元素」 >「樣式」會在專屬區塊中顯示下列 at 規則：
查看 @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 規則：
- 檢查預覽畫面中的資訊卡文字。
- 在「樣式」分頁中，找出
@scope規則。
在這個範例中，@scope 規則會針對具有 card 類別的元素內的所有 <p> 元素，覆寫全域 CSS background-color 宣告。
如要編輯 @scope 規則，請按兩下。
查看 @font-palette-values at 規則
@font-palette-values CSS at 規則可讓您自訂 font-palette 屬性的預設值。「元素」 >「樣式」會在專屬區段中顯示這項 at 規則。
在下一個預覽畫面中查看 @font-palette-values 部分：
- 檢查預覽畫面中的第二行文字。
- 在「樣式」中，找到
@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 區段：
popover- 在預覽畫面中開啟子選單，也就是依序點選「你的帳戶」和「店面」。
- 在預覽畫面中，使用
id="submenu"檢查元素。 - 在「樣式」中，找出
position-try-options屬性，然後按一下其--bottom值。「樣式」分頁會將你帶往對應的@position-try區段。 - 按一下
position-anchor值連結或相同的anchor()引數。「元素」面板會選取具有相應popovertarget屬性的元素，「樣式」分頁則會顯示該元素的 CSS。
如要編輯值，請連按兩下。
查看元素的方塊模型
如要查看元素的方塊模型，請前往「樣式」分頁，然後點選動作列中的「顯示側欄」按鈕 
。
如要變更值，請按兩下。
搜尋及篩選元素的 CSS
在「樣式」和「已計算」分頁的「篩選器」方塊中，搜尋特定 CSS 屬性或值。
如要在「已計算」分頁中搜尋繼承的屬性，請勾選「顯示全部」核取方塊。
如要瀏覽「已計算」分頁，請勾選「群組」，將篩選後的屬性歸入可收合的類別。
模擬已聚焦的網頁
如果您將焦點從網頁切換至開發人員工具，系統會自動隱藏焦點觸發的部分疊加元素。例如下拉式清單、選單或日期挑選器。勾選「模擬已聚焦的網頁」選項，即可模擬元素處於焦點狀態，方便您進行偵錯。
請在這個示範頁面上模擬已聚焦的網頁：
- 將焦點移至輸入元素。下方會顯示另一個元素。
- 開啟開發人員工具。現在焦點位於開發人員工具視窗，而非頁面，因此元素會再次消失。
- 在「元素」 >「樣式」中，按一下「:hov」，勾選「模擬焦點網頁」，並確認已選取輸入元素。現在可以檢查該元素下方的元素。
如要瞭解凍結元素的其他方法，請參閱「凍結畫面並檢查消失的元素」。
切換虛擬類別
如要切換虛擬類別，請按照下列步驟操作：
- 選取元素。
- 在「元素」面板中，前往「樣式」分頁。
- 按一下「:hov」。
- 勾選要開啟的虛擬類別。
在本範例中，您可以看到即使元素實際上並未懸停，開發人員工具仍會將 background-color 宣告套用至元素。
「樣式」分頁會顯示所有元素的下列虛擬類別：
此外，部分元素可能會有自己的虛擬類別。選取這類元素時，「樣式」分頁會顯示「強制特定元素狀態」區段，展開後即可開啟特定於該元素的虛擬類別。
如需互動式教學課程，請參閱「為類別新增偽狀態」。
查看沿用的醒目顯示虛擬元素
虛擬元素可讓您設定元素的特定部分樣式。醒目顯示的虛擬元素是「已選取」狀態的文件部分，樣式為「醒目顯示」，向使用者表明這個狀態。例如 ::selection、::spelling-error、::grammar-error 和 ::highlight 等虛擬元素。
如規格所述，如果多個樣式發生衝突，層疊會決定勝出的樣式。
如要進一步瞭解規則的優先順序和繼承，您可以查看繼承的醒目顯示虛擬元素：
-
我繼承了父項的螢光筆偽元素樣式。選我！
選取上方文字的一部分。
在「樣式」分頁中向下捲動，找出
Inherited from ::selection pseudo of...區段。
查看層疊層
疊層可讓您更明確地控管 CSS 檔案，避免樣式特異性衝突。這項功能適用於大型程式碼集、設計系統，以及在應用程式中管理第三方樣式。
如要查看疊層，請檢查下一個元素，然後依序開啟「元素」 >「樣式」。
在「樣式」分頁中，查看 3 個層疊層及其樣式：page、component 和 base。
如要查看圖層順序，請按一下圖層名稱或「切換 CSS 圖層檢視畫面」按鈕 
。
page 層的具體性最高，因此元素的背景為綠色。
在列印模式中查看頁面
如要以列印模式查看網頁，請按照下列步驟操作：
- 開啟指令選單。
- 開始輸入
Rendering並選取Show Rendering。 - 在「模擬 CSS 媒體」下拉式選單中，選取「print」。
使用「涵蓋範圍」分頁查看已用和未用的 CSS
「涵蓋範圍」分頁會顯示網頁實際使用的 CSS。
- 在開發人員工具處於焦點時，按下 Command+Shift+P 鍵 (Mac) 或 Control+Shift+P 鍵 (Windows、Linux、ChromeOS)，即可開啟指令選單。
開始輸入
coverage。
選取「顯示涵蓋範圍」。系統會顯示「涵蓋範圍」分頁。
按一下「重新載入」
。
頁面會重新載入，而「涵蓋範圍」分頁會提供總覽資訊，說明瀏覽器載入的每個檔案中，有多少 CSS (和 JavaScript) 遭到使用。
綠色代表已使用的 CSS。紅色代表未使用的 CSS。
按一下 CSS 檔案，即可在上方預覽畫面中，逐行查看該檔案使用的 CSS。
在螢幕截圖中，
devsite-google-blue.css的第 55 至 57 行和第 65 至 67 行未使用，而第 59 至 63 行則已使用。
強制進入列印預覽模式
請參閱「強制開發人員工具進入列印預覽模式」。
複製 CSS
在「樣式」分頁的單一下拉式選單中，您可以複製個別的 CSS 規則、宣告、屬性、值
此外，您也可以複製 JavaScript 語法的 CSS 屬性。如果您使用 CSS-in-JS 程式庫，這個選項就非常實用。
如要複製 CSS：
- 選取元素。
- 在「元素」 >「樣式」分頁中，對 CSS 屬性按一下滑鼠右鍵。
從下拉式選單中選取下列其中一個選項：
- 複製聲明。以 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 宣告
由於宣告順序會影響元素的樣式設定方式，因此您可以透過下列不同方式新增宣告：
- 新增內嵌宣告。相當於在元素的 HTML 中加入
style屬性。 - 在樣式規則中新增宣告。
您應該使用哪種工作流程？在大多數情況下，您可能想使用內嵌宣告工作流程。內嵌宣告的明確度高於外部宣告，因此內嵌工作流程可確保變更在元素中生效，符合您的預期。如要進一步瞭解特殊性，請參閱「選取器類型」。
如果您要對元素的樣式進行偵錯，並需要測試在不同位置定義宣告時會發生什麼情況，請使用其他工作流程。
新增內嵌宣告
如要新增內嵌宣告，請按照下列步驟操作：
- 選取元素。
- 在「樣式」分頁中，點選「element.style」區段的括號之間。游標會聚焦，方便你輸入文字。
- 輸入屬性名稱，然後按下 Enter 鍵。
輸入該屬性的有效值，然後按下 Enter 鍵。在「DOM Tree」中，您可以看到元素已新增
style屬性。
在螢幕截圖中，
margin-top和background-color屬性已套用至所選元素。在 DOM 樹狀結構中，您可以看到元素style屬性中反映的宣告。
在樣式規則中新增宣告
如要將宣告新增至現有樣式規則，請按照下列步驟操作：
- 選取元素。
- 在「樣式」分頁中，按一下要新增宣告的樣式規則方括號之間。游標會聚焦，方便你輸入文字。
- 輸入屬性名稱，然後按下 Enter 鍵。
- 輸入該屬性的有效值，然後按下 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 即可。
變更長度值
你可以使用指標變更任何具有長度的屬性，例如寬度、高度、邊框間距、邊界或邊框。
如要變更長度單位，請按照下列步驟操作：
- 將游標懸停在單元名稱上，你會發現該名稱已加上底線。
按一下單位名稱，從下拉式選單中選取單位。
如要變更長度值，請按照下列步驟操作：
- 將游標懸停在單位值上，你會發現游標變成水平雙向箭頭。
水平拖曳即可調高或調低值。
如要以 10 為單位調整值，請在拖曳時按住 Shift 鍵。
為元素新增類別
如要將類別新增至元素：
- 在 DOM 樹狀結構中選取元素。
- 按一下「.cls」。
- 在「新增課程」方塊中輸入課程名稱。
- 按下 Enter 鍵。
模擬淺色和深色主題偏好設定，並啟用自動深色模式
如要切換自動深色模式，或模擬使用者偏好的淺色或深色主題，請按照下列步驟操作：
- 在「元素」>「樣式」分頁中，按一下
「切換常見的算繪模擬」。
從下拉式清單中選取下列其中一個選項：
- prefers-color-scheme: light。表示使用者偏好淺色主題。
- prefers-color-scheme: dark。表示使用者偏好深色主題。
- 自動深色模式。即使您未實作深色模式，系統也會以深色模式顯示網頁。此外，系統也會自動將
prefers-color-scheme設為dark。
這個下拉式選單是「算繪」分頁的「模擬 CSS 媒體功能」prefers-color-scheme和「啟用自動深色模式」選項的捷徑。
切換課程
如要啟用或停用元素上的類別，請按照下列步驟操作：
新增樣式規則
如要新增樣式規則，請按照下列步驟操作：
- 選取元素。
- 按一下「新增樣式規則」
。開發人員工具會在 element.style 規則下方插入新規則。
在螢幕截圖中，點選「New Style Rule」(新增樣式規則) 後，開發人員工具會新增 h1.devsite-page-title 樣式規則。
選擇要新增規則的 CSS 樣式表
新增樣式規則時，請按住「New Style Rule」(新樣式規則)
，然後選擇要將樣式規則新增至哪個 CSS 樣式表。
切換聲明
如要開啟或關閉單一聲明，請按照下列步驟操作：
- 選取元素。
- 在「樣式」分頁中，將滑鼠游標懸停在定義聲明的規則上。每個聲明旁邊都會顯示核取方塊。
- 勾選或取消勾選聲明旁的核取方塊。清除宣告後，開發人員工具會將其劃掉，表示該宣告已失效。
在螢幕截圖中，目前所選元素的 color 屬性已切換為關閉。
在動畫期間編輯 ::view-transition 虛擬元素
請參閱「動畫」中的對應章節。
詳情請參閱「使用 View Transitions API 實現流暢簡單的轉場效果」。
使用格線編輯器對齊格線項目及其內容
請參閱「檢查 CSS 格線」一節。
使用顏色挑選器變更顏色
請參閱「使用顏色挑選器檢查及偵錯 HD 和非 HD 顏色」。
使用角度時鐘變更角度值
角度時鐘提供 GUI，可變更 CSS 屬性值中的 <angle>。
如要開啟「角度時鐘」，請按照下列步驟操作：
- 選取含有角度宣告的元素。
在「樣式」分頁中，找出要變更的
transform或background宣告。 按一下角度值旁邊的「角度預覽」方塊。
-5deg和0.25turn左側的小時鐘是角度預覽畫面。按一下預覽畫面即可開啟「角度時鐘」。
按一下「角度時鐘」圓圈，或捲動滑鼠，即可變更角度值，每次增加 / 減少 1。
還有更多鍵盤快速鍵可變更角度值。詳情請參閱樣式窗格鍵盤快速鍵。
使用陰影編輯器變更方塊和文字陰影
陰影編輯器提供 GUI，可變更 text-shadow 和 box-shadow CSS 宣告。
如要使用陰影編輯器變更陰影：
選取含有陰影宣告的元素。例如，選取下一個元素。
在「樣式」分頁中，找出
text-shadow或box-shadow宣告旁的陰影
圖示。
按一下陰影圖示，開啟「陰影編輯器」。
變更陰影屬性：
- 「類型」 (僅適用於
box-shadow)。選擇「Outset」或「Inset」。 - X 和 Y 位移。拖曳藍點或指定值。
- 模糊。拖曳滑桿或指定值。
- 擴展 (僅適用於
box-shadow)。拖曳滑桿或指定值。
- 「類型」 (僅適用於
觀察套用至元素的變更。
使用「加/減速編輯器」編輯動畫和轉場效果的時間
「加/減速編輯器」提供 GUI，可變更 transition-timing-function 和 animation-timing-function 的值。
如要開啟「Easing Editor」(緩和效果編輯器)，請按照下列步驟操作：
- 選取含有時間函式宣告的元素，例如這個頁面上的
<body>元素。 - 在「樣式」分頁中，找出
transition-timing-function、animation-timing-function宣告或transition簡寫屬性旁的紫色
圖示。
- 按一下圖示即可開啟「緩和效果編輯器」：
使用預設值調整時間
如要按一下即可調整時間軸，請使用「加/減速編輯器」中的預設設定：
- 在「Easing Editor」(緩和效果編輯器) 中，如要設定關鍵字值，請按一下其中一個選擇器按鈕：
- linear
- ease-in-out
- ease-in
- ease-out
- linear
在「預設集切換器」中，按一下
或 
按鈕，選取下列其中一個預設集：- 線性預設：
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 變更內容」。
此外，您也可以透過「變更」分頁標籤追蹤變更。