Kayce Basques
Jecelyn Yeen
Sofia Emelianova
在這個 Chrome DevTools 功能參考資料中，探索與查看及變更 CSS 相關的新工作流程。
如要瞭解基本概念，請參閱「查看及變更 CSS」一文。
選取元素
開發人員工具的「Elements」面板可讓您一次查看或變更一個元素的 CSS。
在螢幕截圖中，DOM 樹狀結構中以藍色醒目顯示的 h1 元素就是所選元素。在右側的「Styles」分頁中，您可以查看元素的樣式。在左側，元素在可視區域中會以醒目顯示，但這只是因為滑鼠在 DOM 樹狀結構中懸停在該元素上。
如需教學課程，請參閱「查看元素的 CSS」。
選取元素的方式有很多種：
- 在檢視區中，按一下元素的滑鼠右鍵，然後選取「檢查」。
- 在 DevTools 中，按一下「Select an element」圖示
，或按下 Command + Shift + C 鍵 (Mac) 或 Control + Shift + C 鍵 (Windows、Linux)，然後按一下檢視區中的元素。
- 在開發人員工具中，按一下「DOM Tree」中的元素。
- 在開發人員工具中，在「控制台」中執行
document.querySelector('p')等查詢，按一下結果的滑鼠右鍵，然後選取「在元素面板中顯示」。
，或按下 Command + Shift + C 鍵 (Mac) 或 Control + Shift + C 鍵 (Windows、Linux)，然後按一下檢視區中的元素。查看 CSS
使用「元素」 >「樣式」和「計算」分頁，查看 CSS 規則並診斷 CSS 問題。
使用連結導覽
「樣式」分頁會顯示各處連結至其他位置的連結，包括但不限於：
- 除了 CSS 規則，也適用於樣式表單和 CSS 來源。這類連結會開啟「來源」面板。如果樣式表已經過精簡，請參閱「讓精簡檔案可讀」。
- 在「Inherited from ...」部分，將元素設為父項元素。
- 在
var()呼叫中，將其指向自訂屬性宣告。 - 在
animation簡寫屬性中，改為@keyframes。 - 說明文件工具提示中的「瞭解詳情」連結。
- 還能使用更多其他功能。
以下是其中幾項重點：
連結的樣式可能會有所不同。如果不確定某個項目是否為連結，請嘗試點選該項目來確認。
查看 CSS 說明文件、特定性和自訂屬性值的工具提示
將滑鼠游標懸停在特定元素上時，元素 > 樣式 會顯示含有實用資訊的工具提示。
查看 CSS 說明文件
如要查看 CSS 簡短說明的工具提示，請將滑鼠游標懸停在「Styles」分頁中的屬性名稱上。