本指南假設您已熟悉在 Chrome 開發人員工具中檢查 CSS。如要瞭解基本概念，請參閱「查看及變更 CSS」一文。
檢查您編寫的 CSS
假設您在元素中加入了一些 CSS，而您想確保系統正確套用新樣式。重新整理頁面時，元素看起來會與之前相同。發生問題。
首先，請檢查元素，確認新的 CSS 已確實套用至元素。
有時候，「Elements」>「Styles」窗格中會顯示新的 CSS，但新的 CSS 處於淺色文字、無法編輯、劃掉的部分，或旁邊標有警告或提示圖示。
瞭解「Styles」窗格中的 CSS
「Styles」窗格可辨識多種 CSS 問題，並以不同方式醒目顯示問題。
相符和不相符的選取器
「Styles」窗格會顯示一般文字中相符的選取器，並以淺色文字顯示不相符的選取器。
無效的值和宣告
「Styles」(樣式) 窗格就會劃出外框，並在以下項目旁邊顯示 警告圖示：
- 如果 CSS 屬性無效或不明，則為整個 CSS 宣告 (屬性和值)。
- 僅限 CSS 屬性有效但值無效時的值。
已覆寫
「Styles」窗格會找出其他屬性根據階層順序覆寫的屬性。
在這個範例中，元素上的 width: 300px; 樣式屬性會覆寫 .youtube 類別的 width: 100%。
閒置
「Styles」窗格會以淺色文字顯示，並在有效但因其他屬性而沒有任何效果的屬性旁放置 資訊圖示。
由於 CSS 邏輯，而非階層順序，這些淺色屬性已停用。
在這個範例中，display: block; 屬性停用了控制彈性或格線版面配置的 justify-content 和 align-items。
已繼承和非沿用
「樣式」樣式窗格根據預設繼承列出部分Inherited from <element-name>部分的屬性：
- 繼承預設的文字為一般文字。
- 不沿用預設的淺色文字。
簡寫
您可使用簡短 (簡明) 屬性一次設定多個 CSS 屬性，讓樣式表更清晰易讀。不過，由於此類屬性的簡短特性，您可能會遺漏一個經度 (精確) 屬性，而這會覆寫簡寫所隱含的屬性。
「Styles」窗格會將簡短屬性顯示為 下拉式清單，其中包含縮短的所有屬性。
在這個範例中，實際上會覆寫四個短屬性中的 2 個。
無法編輯
「Styles」窗格會顯示無法以斜體文字編輯的屬性。舉例來說，您無法編輯下列來源的 CSS：
user agent stylesheet：Chrome 的預設樣式表。在元素上與樣式相關的 HTML 屬性，例如高度、寬度、顏色等。您可以在 DOM 樹狀結構中加以編輯，且這會在「Styles」窗格中更新 CSS。
在這個範例中，
<svg>元素的height="48"屬性設為50。這會更新「Styles」窗格中svg[Attributes Style]下方的對應屬性。
檢查未採用您預期樣式的元素
如要設法找出問題，請查看：
- 「Styles」窗格的工具提示中的 CSS 說明文件和選取器詳細程度。
- 「運算」窗格會顯示已套用至元素的最終版 CSS，並與聲明的內容進行比較。
「Elements」(元素) >「Styles」(樣式) 窗格會顯示 CSS 規則在各種樣式表中編寫時的確切組合。另一方面，「Elements」 >「Computed」窗格則會列出 Chrome 用來轉譯元素的已解析 CSS 值：
瞭解「Computed」窗格中的 CSS
「Computed」窗格也會以不同方式顯示各種屬性。
已宣告並沿用
「運算」窗格會列出一般字型中所有樣式表宣告的屬性，包括元素本身和繼承的屬性。按一下旁邊的 展開圖示即可查看其來源。
如要在「Styles」窗格中查看宣告，請將滑鼠遊標懸停在展開的屬性上，然後按一下 箭頭按鈕。
如要在「Sources」窗格中查看宣告，請按一下來源檔案的連結。
如果資源有多個來源，「運算」窗格會先顯示 Cascade 得獎者。
執行階段
「Computed」窗格會列出在執行階段以淺色文字計算的屬性值。
在這個範例中，Chrome 針對 <ul> 元素計算了下列元素：
width相對於其父項<div>- 相對於其子項的
height，兩個<li>元素
非沿用和自訂
如要讓「運算」窗格顯示「所有」屬性及其值，請勾選 「顯示全部」。所有屬性包括：
如要將這份大型清單分門別類，請勾選 「群組」。
這個範例說明「Animation」(動畫) 下方顯示非繼承屬性的初始值，「CSS Variables」(CSS 變數) 下方則會顯示自訂屬性。
搜尋重複的聯絡人
如要調查特定屬性及其可能的重複項目，請在「篩選器」文字方塊中輸入該屬性的名稱。您可以在「Styles」和「Computed」窗格中進行此操作。
請參閱「搜尋及篩選元素的 CSS」一文。
找出未使用的 CSS
請參閱「涵蓋率：找出未使用的 JavaScript 和 CSS」一節。