CSS 功能參考

在下列與檢視和變更 CSS 相關的 Microsoft Edge 開發工具功能綜合參考中探索新的工作流程。

若要瞭解基本概念，請參閱開始 檢視和變更 CSS。

詳細內容：

• 選取元素
• 檢視 CSS
  • 使用連結瀏覽
  • 檢視包含 CSS 文件、特定性和自訂屬性值的工具提示
    • 檢視 CSS 文件
    • 檢視選取器特定性
    • 檢視自訂屬性的值
  • 檢視定義規則的外部樣式表
  • 檢視無效、已覆寫、非使用中及其他 CSS
  • 僅檢視實際套用至元素的 CSS
  • 依字母順序檢視 CSS 屬性
  • 檢視繼承的 CSS 屬性
  • 檢視 CSS at-rules
    • 檢視 @property at-rules
    • 檢視 @supports at-rules
    • 檢視 @scope at-rules
    • 檢視 @font-palette-values at-rules
    • 檢視 @position-try at-rules
  • 檢視元素方塊模型
  • 搜尋及篩選元素的 CSS
  • 模擬焦點所在的頁面
  • 切換虛擬類別
  • 檢視繼承的醒目提示 pseudo-elements
  • 檢視串聯圖層
  • 以列印模式檢視頁面
  • 使用涵蓋範圍工具檢視已使用和未使用的 CSS
  • 強制預覽列印模式
• 複製 CSS
• 變更 CSS
  • 新增 CSS 宣告至元素的兩種方法
    • 新增內嵌 CSS 宣告至元素
    • 將 CSS 宣告新增至現有樣式規則
  • 變更宣告名稱或值
  • 使用鍵盤快速鍵變更可列舉值
  • 變更長度值
  • 在元素中加入類別
  • 模擬淺色和深色佈景主題喜好設定並啟用自動深色模式
  • 切換班級
  • 新增樣式規則
    • 選取要新增規則的樣式表
    • 將樣式規則新增至樣式表中的特定位置
  • 切換宣告
  • 編輯動畫期間的 ::view-transition 虛擬元素
  • 使用 [格線編輯器] 對齊格線項目及其內容
  • 使用色彩選擇器變更色彩
  • 使用色彩選擇工具在頁面上取樣色彩
  • 使用角度時鐘變更角度值
  • 使用陰影編輯器變更方塊和文字陰影
  • 使用緩動編輯器編輯動畫和轉場時間
    • 使用預設集來調整時間
    • 設定自訂計時
• 另請參閱

選取元素

DevTools 中的 元素 工具可讓您一次檢視或變更一個元素的 CSS。 選取的元素會在 DOM 樹狀結構中反白顯示。 元素的樣式會顯示在 [樣式 ] 窗格中。 如需教學課程，請參閱 檢視元素的 CSS。

在上圖中：

• h1 DOM 樹狀結構中強調顯示的元素是選取的元素。
• 在右側，元素的樣式會顯示在 [樣式 ] 窗格中。
• 在左側，元素在視埠中醒目提示，但這只是因為滑鼠目前在 DOM 樹狀結構中懸停在其上：

有多種方法可以選取元素：

• 在轉譯的網頁中，以滑鼠右鍵按一下頁面元素，然後按一下 [檢查]。

• 在開發工具中，按一下 [選取元素] () 或按 Ctrl+Shift+C (Windows、Linux) 或 Command+Shift+C (macOS) ，然後按一下檢視區中的元素。

• 在 DevTools 中，按一下 DOM 樹狀結構中的元素。

• 在開發工具中，執行查詢 document.querySelector('p') ，例如在 主控台中，以滑鼠右鍵按一下結果，然後選取 [ 在元素面板中顯示]。

檢視 CSS

使用 [元素>]、[樣式] 和 [計算] 索引標籤來檢視 CSS 規則並診斷 CSS 問題。

使用連結瀏覽

[ 樣式 ] 索引標籤會顯示不同位置的連結，包括但不限於：

• 在 CSS 規則旁邊、樣式表和 CSS 來源。 這樣的連結會開啟 [來源] 工具。 如果樣式表已縮小，請參閱在 JavaScript 偵錯功能中使用 pretty-print 重新格式化縮小的 JavaScript 檔案。

• 在 [ 繼承自] 區段中，到父元素。

• 在呼叫中 var() ，自訂屬性宣告。 請參閱在 MDN ) 使用 CSS 自訂屬性 (變數 。

• 在簡寫屬性中 animation ，設定為 @keyframes。

• 在文件工具提示中瞭解更多連結。

連結的樣式可能會有所不同。 如果您不確定某項目是否為連結，請嘗試按一下它來找出答案。

例如：

1. 在新的視窗或索引標籤中移至 [待辦事項] 應用程式 。

2. 以滑鼠右鍵按一下字串 “Add a task” 上方的空格字元，然後按一下 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。

3. 選取 [樣式 ] 索引標籤。

   顯示各種類型的連結：

   

檢視包含 CSS 文件、特定性和自訂屬性值的工具提示

在 「元素」 工具中，當您將游標暫留在特定元素上時，[ 樣式 ] 索引標籤會顯示包含有用資訊的工具提示。

檢視 CSS 文件

若要顯示 CSS 屬性的描述，請在工具提示中：

1. 移至網頁，例如在新視窗或索引標籤中的 To Do 應用程式。

2. 以滑鼠右鍵按一下字串 “Add a task” 上方的空格字元，然後按一下 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。

3. 選取 [樣式 ] 索引標籤。

4. 將游標停留在 CSS 屬性名稱上，例如 padding:。

   隨即顯示工具提示：

   

   DevTools 會從 VS Code 自訂資料 存放庫中提取工具提示的描述。

5. 在工具提示中，按一下 [深入了解 ] 連結。

   顯示 MDN 屬性的 CSS 參考頁面，例如 padding CSS 屬性。

若要關閉 CSS 工具提示：

• 在工具提示中，選取 [ 不顯示 ] 核取方塊。

若要再次開啟 CSS 工具提示：

1. 在開發工具中，選取 自訂和控制開發工具，然後選取 設定。

2. 在左側的大綱中，選取 [喜好設定]，然後向下捲動至 [元素] 區段。

3. 選取 [顯示 CSS 文件工具提示 ] 核取方塊。

檢視選取器特定性

將游標停留在 CSS 選取器上，以顯示選取器特異性權重的工具提示，例如： 特異性： (0,0,1) ：

例如：

1. 移至網頁，例如在新視窗或索引標籤中的 To Do 應用程式。

2. 以滑鼠右鍵按一下該網頁，然後按一下 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。

3. 在 DOM 樹狀結構中，選取元素 <body> 。

4. 在 [ 樣式 ] 索引標籤中，將游標停留在 CSS 選取器上 body 。

   隨即顯示工具提示，顯示 特異性： (0,0,1) ：

   

另請參閱:

• 特異性 - MDN。

檢視自訂屬性的值

將游標停留在函數上 var(--custom-property) 以查看工具提示中自訂屬性的值。

例如：

1. 移至網頁，例如在新視窗或索引標籤中的 To Do 應用程式。

2. 以滑鼠右鍵按一下該網頁，然後按一下 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。

3. 在 DOM 樹狀結構中，選取元素 <body> 。

4. 在 [ 樣式 ] 索引標籤的 CSS 規則中 body ，將游標停留在 --spacing上。

   值 .3rem 隨即顯示在工具提示中：

   

另請參閱:

• 自訂屬性 (--*) ： CSS 變數 - MDN。

檢視定義規則的外部樣式表

在 [樣式 ] 窗格中，按一下 CSS 規則旁的連結，開啟定義規則的外部樣式表。 樣式表隨即會在 [來源] 工具的 [編輯器] 窗格中開啟。

如果樣式表已縮小，請按一下 [編輯器] 窗格底部的 [格式] ([]) 按鈕。 如需詳細資訊，請參閱在 JavaScript 偵錯功能中使用 pretty-print 重新格式化縮小的 JavaScript 檔案。

在上圖中，按一下 to-do-styles.css:5之後，系統會轉到 的第 5 to-do-styles.css行，其中定義了 h1 CSS 規則。

檢視無效、已覆寫、非使用中及其他 CSS

[ 樣式 ] 索引標籤可辨識多種 CSS 問題，並以不同的方式醒目提示它們。

僅檢視實際套用至元素的 CSS

[ 樣式 ] 窗格會顯示套用至元素的所有規則，包括已覆寫的宣告。 如果您對覆寫的宣告不感興趣，請使用 [計算] 窗格只檢視實際套用至元素的 CSS。

例如：

1. 移至網頁，例如在新視窗或索引標籤中的 To Do 應用程式。

2. 以滑鼠右鍵按一下 [ 我的工作] 標題，然後按一下 [檢查]。

   DevTools 隨即開啟，其中已選取 [元素] 工具，並在 <h1> DOM 樹狀結構中選取元素。

3. 在 [元素] 工具中，選取 [ 計算] 索引標籤。

   系統會顯示套用至所選元素的 CSS 屬性：

   

   以斜體字顯示的屬性名稱和值表示在執行階段計算的值。

4. 若要顯示所有屬性，請選取 [ 全部顯示 ] 核取方塊。

依字母順序檢視 CSS 屬性

使用 [計算] 窗格。 請參閱上方的 僅檢視實際套用至元素的 CSS。

檢視繼承的 CSS 屬性

核取 [計算] 窗格中的 [全部顯示] 核取方塊。 請參閱上方的 僅檢視實際套用至元素的 CSS。

檢視 CSS at-rules

At-rules 是可讓您控制 CSS 行為的 CSS 陳述式。

在 「元素」 工具中，「 樣式 」索引標籤會在專用區段中顯示下列 at-rules：

• @property - 請參閱下方的 檢視 @property at-rules。
• @supports - 請參閱下方的 檢視 @supports at-rules。
• @scope - 請參閱下方的 檢視 @scope at-rules。
• @font-palette-values - 請參閱下方的 檢視 @font-palette-values at-rules。
• @position-try - 請參閱下方的 檢視 @position-try at-rules。

檢視 @property at-rules

@property CSS at-rule 可讓您在樣式表中定義特定類型的 CSS 自訂屬性。

將游標停留在 [樣式 ] 索引標籤中這類屬性的名稱上，即可看到包含下列內容的工具提示：

• 屬性的值，例如 20%。
• 屬性的描述元，例如： initial value: 40%
• 在 [樣式] 索引標籤底部的可@property摺疊區段中，檢視已註冊的屬性連結。

例如：

1. 移至使用 @property at-rule（例如，在新視窗或索引標籤中 檢視 @property at-rules）的頁面。

2. 以滑鼠右鍵按一下 [項目 3 ] 段落，然後按一下 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。

3. 在 [樣式 ] 索引標籤中，將游標停留在該 var(--itemSize) 函數上：

   

   工具提示包含：

   • 屬性的值，例如 100px。
   • 屬性的描述元，例如初始值。
   • A 檢視已註冊的住宿連結。

4. 按一下 [檢視已註冊的房產 ] 連結。

   展開的 @property 區段隨即顯示在 [樣式 ] 索引標籤的下方：

   

若要編輯 @property 規則，請按兩下規則的名稱或值。 請參閱下方變更 宣告名稱或值。

另請參閱:

• @property：賦予 CSS 變數超能力 ，在 Web.dev。
• 自訂屬性 (--*) ： MDN 上的 CSS 變數 。

檢視 @supports at-rules

[ 樣式 ] 索引標籤會顯示 @supports CSS at 規則 （如果它們套用至元素）。

例如，若要檢視 @supports 規則：

1. 在新的視窗或索引標籤中，移至使用 @supports at-rule 的頁面，例如 檢視 @supports at-rules。

2. 以滑鼠右鍵按一下 [我支援 CIE LAB 色彩空間！]，然後選取 [檢查]。

   DevTools 隨即開啟。 在 「元素」 工具的 DOM 樹狀結構中，選取元素 <div class="box"> 。 在 [樣式 ] 索引標籤中， @supports 會列出 CSS 宣告：

   

• 如果您的瀏覽器支援該 lab() 功能，則元素為綠色。

• 如果您的瀏覽器不支援該 lab() 功能，則元素為紫色。

若要查看哪些瀏覽器版本支援 CIE LAB 色彩空間，請 Caniuse.com 搜尋 “lab”。

檢視 @scope at-rules

如果 CSS at-rules 套用至元素，則「 樣式 」索引標籤會顯示 CSS @scope at-rules。

@scope at-rules 可讓您設定 CSS 樣式的範圍;也就是明確地將樣式套用至特定元素。 請參閱 @scope MDN 中的 CSS at-rule 。

若要檢視規則：@scope

1. 在新的視窗或索引標籤中，移至使用 @scope at-rule 的頁面，例如 檢視 @scope at-rules 示範：

   

2. 以滑鼠右鍵按一下 [我是卡片上的文字]，然後選取 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。

3. 選取 [樣式 ] 索引標籤。

4. 檢查 @scope 規則：

   

   在此範例中，@scope規則 (background color = plum) 會針對元素內的任何<p>元素覆寫全域 CSS background-color 宣告 aquamarine) ， ( (例如具有card類別的) 。<div>

   若要編輯 @scope 規則，請在規則中按兩下：

5. 在 [ 樣式 ] 索引標籤中，按兩下 [梅花]，按 Delete，然後選取 [ 米色]。

   示範網頁卡片中的文字會從梅花背景變更為米色背景。

檢視 @font-palette-values at-rules

@font-palette-values CSS at-rule 可讓您自訂 (覆寫) 屬性的font-palette預設值。 在 [元素 ] 工具中，[ 樣式 ] 索引標籤會在專用區段中顯示此 at-rule。

若要檢視 @font-palette-values CSS 規則：

1. 在新的視窗或索引標籤中，移至使用 @font-palette-values at-rule 的頁面，例如 檢視 @font-palette-values at-rules 示範。

2. 以滑鼠右鍵按一下 [新色彩]，然後選取 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。

3. 在 [ 樣式 ] 索引標籤中，尋找 @font-palette-values CSS 規則：

   

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

   若要編輯自訂值，請按兩下該自訂值，如下所示：

4. 在 CSS 規則的 @font-palette-values 屬性中 override-colors ，按兩下 0 gold, 1 red，然後輸入 0 blue, 1 red。

   在檢查的網頁中，「新色彩」現在呈現為藍色和紅色。

檢視 @position-try at-rules

@position-try CSS 規則以及position-try-fallbacks屬性可讓您定義元素的替代錨點位置。

在 [元素 ] 工具中，[ 樣式 ] 索引標籤會解決並連結下列項目：

• position-try-fallbacks屬性值 (或position-try-options屬性值) 連結至專用@position-try --name的 CSS 規則區段。

• position-anchor屬性值和anchor()引數會連結至具有popovertarget屬性的對應元素。

例如，請檢查 position-try-fallbacks 值和 @position-try CSS 規則，如下所示：

1. 在新的視窗或索引標籤中，移至使用 position-try-fallbacks 值和 @position-try 規則的頁面，例如 [檢視 @position-try 規則] 示範。

2. 在呈現的網頁中，開啟子選單;也就是說，按一下 [您的帳戶]，然後按一下 [店面]。

   隨即顯示子功能表，並顯示命令清單：清單、特殊優惠、登出。

3. 在子功能表中，以滑鼠右鍵按一下 [清單] 上方，然後選取 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。 在 DOM 樹狀結構中選取子功能表元素 <ul id="submenu"> ：

   

4. 在 [ 樣式 ] 索引標籤的 CSS 規則中 #submenu ，尋找屬性 position-try-fallbacks 並按一下其 --bottom 值。

   [ 樣式 ] 索引標籤會向下捲動至對應 @position-try 的區段：

   

5. 在 [ 樣式 ] 索引標籤的 CSS 規則中 #submenu ，按一下 --submenu 下列任一屬性中的連結：

   position-anchor: --submenu;
   left: anchor(--submenu right);
   top: anchor(--submenu top);
   

   DOM 樹狀結構會選取具有對應popovertarget屬性值 (popovertarget="submenu") (<button popovertarget="submenu">) 元素，而「樣式」索引標籤會顯示元素的 CSS：

   

若要編輯值，請按兩下該值。

另請參閱:

• @position-try CSS at-rule，位於 MDN。

檢視元素方塊模型

若要檢視元素的方塊模型，請移至 [樣式 ] 窗格並向下捲動。

若要變更值，請按兩下該值。

在下圖中，[樣式] 窗格中的 [箱體模型] 圖顯示目前所選h1元素的箱體模型：

另請參閱:

• MDN 的盒裝模型。

搜尋及篩選元素的 CSS

使用 [樣式] 和 [計算] 窗格上的 [篩選] 文字方塊來搜尋特定的 CSS 屬性或值。

若要在 [計算] 窗格中搜尋繼承的屬性，請勾選 [ 全部顯示 ] 核取方塊。

在下圖中，[ 樣式 ] 窗格經過篩選，以僅顯示包含搜尋查詢 color的規則。

在下圖中，[ 計算] 窗格經過篩選，只顯示包含搜尋查詢 100%的宣告：

模擬焦點所在的頁面

如果將焦點從檢查的網頁切換至 DevTools，如果焦點觸發某些重疊元素，則會自動隱藏。 例如：

• 下拉式清單。
• 功能表。
• 日期選擇器。

若要偵錯這類元素，就像頁面有焦點一樣，請執行下列其中一項操作：

• 在 [元素] 工具的 [ 樣式 ] 索引標籤中，按一下 :hov [ 切換 (元素狀態 ]) ，然後選取 [ 模擬焦點頁面 ] 核取方塊。
• 在 [轉譯 ] 工具中，選取 [ 模擬焦點頁面 ] 核取方塊。

警告： 當此選項設為 document.visibilityStatevisible ，且 visibilitychange 事件不會觸發。 請參閱 MDN 上的 頁面可見度 API 。

若要嘗試模擬焦點所在的頁面：

1. 在新視窗或索引標籤中開啟模擬焦點 頁面 示範。

2. 按一下輸入文字方塊。 或者，按 Tab 將焦點放在輸入文字方塊上。

   另一個元素會顯示在輸入文字方塊下，上面寫著「此訊息只會在文字方塊聚焦時才會出現」。

3. 以滑鼠右鍵按一下輸入文字方塊，然後選取 [檢查]。

   DevTools 隨即開啟，而訊息元素會消失。 現在焦點是 [開發工具] 視窗，而不是檢查的網頁，因此訊息元素會消失。

4. 在 [元素] 工具的 [ 樣式 ] 索引標籤中，按一下 :hov [ 切換 (元素狀態 ]) ，然後選取 [ 模擬焦點頁面 ] 核取方塊。

5. 請確定輸入文字方塊元素 <input id="textBox" type="text"> 仍處於選取狀態。

   在輸入文字方塊下，訊息元素會重新出現在輸入文字方塊下方。

   您現在可以檢查位於輸入文字方塊下方的訊息元素，即使 DevTools 而不是檢查的頁面具有焦點也一樣：

   

6. 清理：在 [元素 ] 工具的 [ 樣式 ] 索引標籤中，按一下 :hov [ 切換 (元素狀態 ]) ，然後清除 [ 模擬焦點頁面 ] 核取方塊。

[ 模擬焦點頁面 ] 核取方塊也會出現在 [轉譯 ] 工具中;請參閱 轉譯工具，以查看網頁在不同顯示選項或視力缺陷下的外觀。

另請參閱:

• 凍結畫面 & 檢查消失的元素，在適用於開發人員的 Chrome 部落格中。

切換虛擬類別

若要切換虛擬類別：

1. 移至網頁，例如在新視窗或索引標籤中的 To Do 應用程式。

2. 輸入工作，例如 工作 1。

3. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

4. 選取 「元素」 工具。

5. 在 DOM 樹狀結構中，選取元素 <li class="task"> 。

6. 選取 [樣式 ] 索引標籤。

7. 按一下右上角的 ：hov。

   顯示核取方塊。

8. 選取您要啟用之虛擬類別的核取方塊，例如 :hover：

   

   在轉譯的網頁中，工作名稱旁邊的圓圈會填滿核取記號，而工作右側會顯示紅色圓圈中的紅色 X，就好像元素被暫留在上方一樣，即使元素實際上並未被暫留在該元素上。

[ 樣式 ] 索引標籤會顯示所有元素的下列虛擬類別：

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

此外，某些元素可能具有元素特定的虛擬類別。 當您選取這類元素時，[ 樣式 ] 索引標籤會顯示 [ 強制特定元素狀態] 區段，您可以展開該區段，並開啟元素特定的虛擬類別，例如 ：read-write 核取方塊：

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

檢視繼承的醒目提示 pseudo-elements

虛擬元素可讓您為元素的特定部分設定樣式。 醒目提示 虛擬元素是具有「已選取」狀態的文件部分，其樣式為「醒目提示」，以向使用者指出此狀態。

例如，這類虛擬元素為：

• ::selection
• ::spelling-error
• ::grammar-error
• ::highlight

當多個樣式發生衝突時，CSS 級聯會決定獲勝樣式。 請參閱 MDN 的 CSS 級聯簡介 。

若要更瞭解規則的繼承性和優先順序，請檢視下列示範中繼承的醒目提示偽元素。

若要檢視繼承的醒目提示虛擬元素：

1. 移至 [ 醒目提示] 虛擬元素 示範 在新視窗或索引標籤中。

2. 選取其中一部分文字「我繼承了父母的亮點偽元素的樣式。 選我！」

   選取的文字會變更為黃色背景上的紅色文字。

3. 以滑鼠右鍵按一下文字「我繼承了父母的醒目提示偽元素的樣式。 選取我！」，然後選取 [檢查]。

   DevTools 隨即開啟。 在「元素」工具的「樣式」標籤中，會顯示區段： 繼承自 ：：selection div.text-parent 的偽：

   

4. 在 DOM 樹狀結構中，選取元素 <div class="text-parent"> 。

   在 [樣式 ] 索引標籤中，隨即顯示區段： 虛擬 ：：selection 元素：

   

另請參閱:

• MDN 中的虛擬元素。

檢視串聯圖層

串聯圖層可讓您更明確地控制 CSS 檔案，以防止樣式特定性衝突。 此功能適用於：

• 大型程式碼庫。
• 系統設計。
• 管理第三方樣式。

若要檢視串聯圖層：

1. 移至使用串聯圖層的網頁，例如 串聯圖層示範 。

2. 以滑鼠右鍵按一下 [我的樣式已分層] 元素，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在 [元素] 工具中，選取 [ 樣式 ] 索引標籤。

4. 在 「樣式 」索引標籤中，檢視三個串聯圖層及其樣式： page、和 componentbase：

   

5. 若要檢視圖層順序，請按一下 (頁面、 元件或 基準) 的圖層名稱。 或者，按一下 切換 CSS 圖層檢視 按鈕。

   該 page 層具有最高的特異性，因此元素的背景是綠色的。

另請參閱:

• 串聯圖層，位於 MDN。

以列印模式檢視頁面

若要以列印模式檢視頁面：

1. 移至網頁。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 按 Esc 一次或兩次，讓 [ 快速檢視 ] 工具列顯示在 DevTools 底部。

4. 在 快速檢視 工具列上，選取 [其他工具] (+ [) ]。

5. 選取 轉譯 工具。

   轉譯工具會在開發工具底部的 [快速檢視] 面板中開啟。

6. 在 [轉譯 ] 工具中，按一下 [模擬 CSS 媒體類型 ] 下拉式清單，然後選取 [ 列印]。

   網頁會呈現如同列印一樣。

7. 完成後，在 [轉譯 ] 工具中，按一下 [模擬 CSS 媒體類型 ] 下拉式清單，然後選取 [ 無模擬]。

使用涵蓋範圍工具檢視已使用和未使用的 CSS

涵蓋 範圍 工具會顯示頁面實際使用的 CSS。

1. 在 Windows (按 Ctrl+Shift+P Linux) ，或在 macOS) (按 Command+Shift+P 來開啟命令功能表，同時將焦點放在 DevTools 上。

2. 開始輸入 coverage，然後選取 [ 顯示涵蓋範圍]：

   

   涵蓋範圍工具隨即出現：

   

3. 按一下 [開始檢測涵蓋範圍]，然後重新整理頁面 () 。 頁面會重新整理， 涵蓋範圍 工具會提供瀏覽器載入的每個檔案使用 CSS (和 JavaScript) 的概觀。 綠色代表已使用的 CSS。 紅色代表未使用的 CSS。

   使用和未使用 CSS (和 JavaScript) 的概觀：

   

4. 若要逐行顯示所使用 CSS 的明細，請按一下 CSS 檔案。

   在下圖中，未使用第 145 至 147 行和第 149 至 151 b66bc881.site-ltr.css 行，而第 163 至第 166 行則使用：

   

強制預覽列印模式

請參閱 強制開發工具進入預覽列印模式。

複製 CSS

從「樣式」標籤中的單一下拉式功能表中，您可以複製個別的CSS規則、宣告、屬性或值;請參閱什麼是 CSS？ 中的 CSS 語法基礎知識。

此外，您可以在 JavaScript 語法中複製 CSS 屬性。 如果您使用的是 CSS-in-JS 函式庫，此選項會很方便;請參閱 CSS-in-JS 架構的樣式編輯。

若要複製 CSS：

1. 在新的視窗或索引標籤中移至使用 CSS 的網頁，例如 To Do 應用程式。

2. 以滑鼠右鍵按一下該網頁，然後按一下 [檢查]。

   DevTools 隨即開啟，並選取 [元素] 工具。

3. 在 DOM 樹狀結構中，選取一個元素，例如 <h1>。

4. 在 [ 樣式 ] 索引標籤的 CSS 規則內，以滑鼠右鍵按一下 CSS 屬性，例如 text-align: center：

   

5. 選取以滑鼠右鍵按一下的功能表項目：

   • 複製宣告。 以 CSS 語法複製屬性及其值： property: value;

   • 複製屬性。 只 property 複製名稱。

   • 複製值。 僅 value複製 .

   • 複製規則。 複製整個 CSS 規則： selector[, selector] { property: value; property: value; ... }

   • 將宣告複製為 JS。 以 JavaScript 語法複製屬性及其值： propertyInCamelCase: 'value'

   • 複製所有宣告。 複製 CSS 語法中的所有屬性及其值： property: value; property: value; ...

   • 將所有宣告複製為 JS。 複製 JavaScript 語法中的所有屬性及其值： propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • 複製所有 CSS 變更。 將您在 [樣式 ] 索引標籤中所做的變更複製到所有宣告中。 此功能表項目會條件顯示。

   • 檢視計算值。 會帶您前往 [ 計算 ] 索引標籤;請參閱上方的 僅檢視實際套用至元素的 CSS。

變更 CSS

本節列出您可以在 元素>樣式中變更 CSS 的所有方法。

此外，您也可以：

• 在頁面載入中覆寫 CSS。 請參閱 使用本機複本覆寫網頁資源 ([覆寫] 索引標籤) 。

• 將修改過的 CSS 儲存至工作區中的本機來源。 請參閱 編輯和儲存工作區中的檔案 (來源工具 工作區索引標籤) 。

新增 CSS 宣告至元素的兩種方法

宣告的順序會影響元素的樣式。 您可以新增內嵌宣告，或將宣告新增至樣式規則來新增宣告。 下列各節會說明這兩種方法。

新增內嵌 CSS 宣告至元素

新增內嵌宣告等同於將屬性新增至 style 元素的 HTML 中。 在大部分案例中，您可能會想要使用內嵌宣告。

內嵌宣告的特異性高於外部宣告，因此使用內嵌宣告可確保變更在您的特定預期元素中生效。 如需特異性的詳細資訊，請參閱 MDN 特異性中的選取器類型。

若要新增內嵌宣告：

1. 選取元素。

2. 在 [樣式 ] 窗格中，按一下 element.style 區段的方括弧之間。 游標會聚焦，讓您輸入文字。

3. 輸入屬性名稱，然後按 Enter。

4. 輸入該屬性的有效值，然後按 Enter。 在 DOM 樹狀結構中， style 已將屬性新增至元素。

或者，在屬性欄位中輸入值，DevTools 接著會建議相符的 property： 值 組清單以從中選取。 例如，如果您在屬性欄位中輸入 bold ，DevTools 會 font-weight: bold 建議 和 font-weight: bolder 作為可能的規則。 按 Enter 以套用規則。

在下圖中， margin-top 和 background-color 屬性已套用至選取的元素。 在 DOM 樹狀結構中，宣告會反映在元素的 style 屬性中。

將 CSS 宣告新增至現有樣式規則

如果您正在偵錯元素的樣式，並且需要專門測試在不同位置定義宣告時會發生什麼情況，請將宣告新增至現有的樣式規則。

若要將宣告新增至現有的樣式規則：

1. 選取元素。

2. 在 [樣式 ] 窗格中，在您要新增宣告的樣式規則的括弧之間按一下。 游標會聚焦，讓您輸入文字。

3. 輸入屬性名稱，然後按 Enter。

4. 輸入該屬性的有效值，然後按 Enter。

變更宣告名稱或值

若要變更 CSS 宣告的名稱，請按兩下宣告的名稱。

若要變更 CSS 宣告的值，請按兩下宣告的值。 下列螢幕擷取畫面顯示如何從清單選取值：

若要變更數值，請根據下一節輸入值，或使用方向鍵。

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

若要變更 CSS 宣告的數值，請輸入值，或使用方向鍵將值遞增特定量。 例如， font-size編輯宣告的可列舉值時，您可以使用下列鍵盤快速鍵以固定量遞增值：

組合鍵	動作
Alt+向上鍵 (Windows、Linux) 、Option + 向上鍵 (macOS)	遞增 0.1。
向上鍵	遞增 1，如果目前值介於 -1 和 1 之間，則遞增 0.1。
Shift+ 向上鍵	遞增 10。
Windows、Linux) (Ctrl+Shift+PgUp、macOS) (Shift+Command+UpArrow	遞增 100。

若要遞減，請按 向下鍵 (或 Page Down) 鍵，而非 向上鍵 (或 Page Up) 鍵。

變更長度值

您可以使用指標來變更任何具有長度值的屬性，例如 width、、heightpadding、 margin或 border。

若要變更長度單位：

1. 在新視窗或索引標籤中開啟使用 CSS 的網頁，例如 To Do 應用程式。

2. 以滑鼠右鍵按一下 [新增工作] 文字，然後選取 [檢查]。

   DevTools 隨即開啟，並顯示 [元素] 工具。 元素是在 <label> DOM 樹狀結構中選取的。

3. 在 [ 樣式 ] 索引標籤的 CSS 規則中 .new-task-form ，在屬性中 max-width: ，將游標暫留在 50rem上。

   隨即會出現工具提示，顯示對等值和單位： 800px。

4. 按一下值 50rem。

   隨即顯示工具提示：「使用滑鼠滾輪或向上鍵/向下鍵遞增/減少。 Ctrl： +/-100， Shift： +/-10， Alt： +/-0.1”

5. 移動滑鼠滾輪，或按 向上鍵 和 向下鍵 ，同時按任意鍵：

   Ctrl：依次遞增 100。 Shift：遞增 10。 Alt：遞增 0.1。

   在檢查的網頁中， [新增任務 輸入] 文字方塊的寬度會隨著您變更值而變更。

6. 在 max-width 屬性的 [值] 欄位中，讓值 200px (從單位變更 rem 為 px 單位) 。

7. 再次移動滑鼠滾輪，或按 向上鍵 和 向下鍵 ，同時按住 Ctrl (+/-100) 、 Shift (+/-10) 或 Alt (+/-0.1) 鍵。

   在檢查的網頁中， [新增任務 輸入] 文字方塊的寬度會隨著您變更值而變更：

   

在元素中加入類別

若要將類別新增至元素：

1. 選取 DOM 樹狀結構中的元素。

2. 按一下 .cls。

3. 在 [新增班級 ] 文字方塊中輸入班級名稱。

4. 按 Enter。

   

模擬淺色和深色佈景主題喜好設定並啟用自動深色模式

若要切換自動深色模式，或模擬使用者對淺色或深色佈景主題的喜好設定：

1. 在 [元素] 工具的 [ 樣式 ] 索引標籤中，按一下右上角的 [切換 常見呈現模擬 ] ([ ) 按鈕：

   

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

   • prefers-color-scheme：淺色。 表示使用者偏好淺色佈景主題。

   • prefers-color-scheme： 深色。 表示使用者偏好深色佈景主題。

   • 自動深色模式。 以深色模式顯示您的網頁，即使您並未實作也一樣。 此外，還會設定 prefers-color-scheme 為 dark 自動。

此下拉式清單是 [模擬 CSS] 媒體功能和 prefers-color-scheme [ 啟用自動深色模式] 轉譯工具選項的快速 鍵 。

另請參閱:

• 使用 [模擬轉譯頁面中的深色或淺色配置] 中的 [轉譯] 工具模擬深色或淺色模式。
• 檢查深色佈景主題和淺色佈景主題的對比問題
• Chrome for Developers 部落格中的自動深色佈景主題。
• prefers-color-scheme：你好黑暗，我在 web.dev 的老朋友 。

切換班級

若要啟用或停用元素上的類別：

1. 選取 DOM 樹狀結構中的元素。

2. 開啟 [元素類別 ] 窗格。 請參閱 新增類別至元素。 [ 新增類別 ] 文字方塊下方是套用至此元素的所有類別。

3. 切換您想要啟用或停用的班級旁邊的核取方塊。

新增樣式規則

若要新增樣式規則：

1. 選取元素。

2. 按一下 [新增樣式規則] ( ]) 。 DevTools 會在 element.style 規則底下插入新規則。

   在下圖中，DevTools 會在您按一下 [新增樣式規則] 之後新增h1.devsite-page-title樣式規則。

   

選取要新增規則的樣式表

根據預設，新增樣式規則時，DevTools 會建立檔中命名 inspector-stylesheet 的新樣式表，然後在此樣式表中新增樣式規則。

若要改為在現有樣式表中新增規則：

• 按住 [新增樣式規則 ] () ，然後從清單中選取要新增樣式規則的樣式表。

將樣式規則新增至樣式表中的特定位置

根據預設，按一下 [新增樣式規則] () 按鈕來新增樣式規則，會在樣式表的 inspector-stylesheetelement.style 規則底下插入新規則。

若要從 [樣式 ] 窗格開始，在特定樣式表的特定位置新增樣式規則：

1. 在 [元素 ] 工具的 [樣式 ] 索引標籤中，將游標停留在剛好位於您要新增樣式規則正上方的樣式規則上。

   [插入樣式規則] 下方的 [] 下方 (圖示) 按鈕會出現在 CSS 規則右側。

2. 按一下 [ (] 下方的 [插入樣式] 圖示下方) 按鈕：

   

切換宣告

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

1. 選取元素。

2. 在 [樣式 ] 窗格中，將游標停留在定義宣告的規則上。 每個宣告旁邊會出現一個核取方塊。

3. 選取或清除宣告旁邊的核取方塊。 當您清除宣告時，DevTools 會將其劃掉，以指出它不再為使用中。

   在下圖中， margin-top 目前所選元素的屬性已切換為關閉。

   

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

請參閱：

• 在 Chrome 文件中編輯動畫期間的 ：：view-transition 偽元素：檢查和修改 CSS 動畫效果。
• 使用 Chrome 文件中的 View Transition API 進行平滑的轉換。

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

請參閱：

• 對齊格線項目及其內容： [ 檢查 CSS] 格線版面配置中的格線編輯器快顯視窗。

使用色彩選擇器變更色彩

[色彩選擇器] 提供用於變更color和background-color宣告的使用者介面。

若要開啟 色彩選擇器：

1. 選取元素。

2. 在 [樣式 ] 窗格中，尋找 color您想要變更的 、 background-color或類似的宣告。 在 、 background-color或類似值的color左側有一個小方塊，這是色彩的預覽。

   在下圖中，左 rgba(0, 0, 0, 0.7) 邊的小正方形是該色彩的預覽。

   

3. 按一下預覽以開啟 色彩選擇器。

   

下圖和清單描述 了 [色彩選擇器] 的每個 UI 元素。

Callout	元件	描述
1	陰影
2	吸管	使用色彩選擇工具在頁面上取樣色彩
3	複製到剪貼簿	將 顯示值 複製到剪貼簿。
4	顯示值	色彩的 RGBA、HSLA 或十六進位表示法。
5	調色盤	按一下正方形以變更色彩。
6	色調
7	不透明度
8	顯示值切換器	在目前色彩的 RGBA、HSLA 和十六進位表示法之間切換。
9	調色盤切換器	在 [材質設計] 調色盤、自訂調色盤或頁面色彩調色盤之間切換。 DevTools 會根據在樣式表中找到的色彩產生頁面調色盤。

另請參閱:

• 色彩用法和調色盤 material.io 的色彩系統：[材質設計] 調色盤。

使用色彩選擇工具在頁面上取樣色彩

若要將選取的色彩變更為頁面上的其他色彩：

1. 按一下 [ 吸管] 圖示 ([ ]) 。 游標會變成放大鏡。

2. 將游標暫留在螢幕上任何位置，具有您想要取樣色彩的像素上。

3. 按一下以確認。

   在下圖中， 色彩選擇器 顯示目前的色彩值 rgba(0,0,0,0.7)，接近黑色。 按一下特定色彩後，特定色彩會變更為檢視區中目前醒目提示的黑色版本。

   

另請參閱:

• 使用 [色彩選擇器] 測試文字與色彩對比

使用角度時鐘變更角度值

角度 時鐘 提供使用者介面，用於變更 CSS 屬性值中的角度量。

若要開啟 角度時鐘：

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

2. 在 [樣式 ] 窗格中，尋找您要變更的 transform OR background 宣告。 按一下角度值旁邊的 [ 角度預覽 ] 方塊。

   在下圖中，左 100deg 邊的小時鐘是角度的預覽。

3. 按一下預覽以開啟 角度時鐘：

   

4. 按一下 [ 角度時鐘 ] 圓圈以變更角度值，或捲動滑鼠將角度值增加或減少 1。

還有其他鍵盤快速鍵可以變更角度值。 在 [樣式] 窗格鍵盤快速鍵中深入了解。

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

使用 [陰影編輯器] 變更 HTML 元素上 或 text-shadow CSS 屬性的box-shadow值：

1. 選取具有 或 box-shadowtext-shadow 宣告的元素。

   例如，在新的索引標籤或視窗中開啟 1DIV 示範頁面 ，以滑鼠右鍵按一下頁面並選取 [檢查 ] 以開啟 DevTools，然後在 [元素] 工具中選取該 <div class="demos"> 元素。

2. 在 [樣式 ] 窗格的 CSS 規則中 .demos ，尋找 box-shadow 宣告，然後按一下其 [開啟陰影編輯器] ([ ) 按鈕。

   [陰影編輯器] 隨即開啟：

   

3. 變更陰影屬性，如下所示：

   Property	如何變更
   Type	選取 [ 外嵌] 或 [內嵌]。 僅適用於 box-shadow。
   X 位移	在文字方塊中指定值，或拖曳藍點。
   Y 位移	在文字方塊中指定值，或拖曳藍點。
   柔邊	在文字方塊中指定值，或拖曳滑桿。
   傳播	在文字方塊中指定值，或拖曳滑桿。 僅適用於 box-shadow。

   變更會即時套用至轉譯網頁中的元素：

   

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

使用 [緩動編輯器 ] 變更 HTML 元素上 animation-timing-function 或 transition-timing-function 屬性的值。

若要開啟 [輕鬆編輯器]：

1. 在開發工具的 [ 元素] 工具中，在 DOM 樹狀結構中，選取套用 CSS 動畫或轉換的元素。

   例如，在新的索引標籤或視窗中開啟 動畫屬性示範頁面 ，以滑鼠右鍵按一下包含動畫的綠色方塊，然後選取 [檢查]。

   DevTools 隨即開啟，並顯示 [元素] 工具。

2. 按 Ctrl+F 並尋找 “spinner”，然後選取裡面的<div class="spinner"><div class="animation-demo good">元素。

   此示範頁面上的紅色 (壞) 和綠色 (好) 框是兩種不同的 CSS 動畫。 這兩個動畫都使用 CSS 屬性與 animation CSS 一起執行，並定義 ease-in-out 計時函式。

3. 在 [樣式] 索引標籤的 CSS 規則中.good .spinner，在宣ease-in-out告的animation左側，按一下 [開啟立方體貝塞爾曲線編輯器] ) 按鈕。

   [快速編輯器] 隨即開啟：

   

使用預設集來調整時間

若要透過簡單的滑鼠點擊來調整時間，請使用 [緩動編輯器] 中的預設集：

1. 開啟 [緩動編輯器]，如上述使用 [緩動編輯器編輯動畫和轉場時間] 中所述。

2. 按一下四個選擇器按鈕的其中一個：

   按鈕	函數類型	CSS 關鍵字
   	線性函數	linear
   	緩入功能	ease-in-out
   	緩置功能	ease-in
   	簡化函數	ease-out

   選取按鈕會在 CSS 規則 (中設定關鍵字值，如果您在下一個步驟) 中選取變體預設，則該值會有所不同，且 預設集切換器 會在 [移動編輯器] 底部開啟。

3. 在 「預設集」切換器中，按一下「 向左< 」或「 向右> 」按鈕，以選擇下列其中一個預設集：

   • 線性預設集： 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)

   時機關鍵字	預設	立方貝塞爾
   緩易加入	In，正弦波	cubic-bezier(0.47, 0, 0.75, 0.72)
   緩易加入	In，二次	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)
   緩出	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)

另請參閱:

• MDN 的貝塞爾曲線。

設定自訂計時

若要設定時序函數的自訂值，請使用線條上的控制點：

• 對於線性函數，請按一下線上的任何位置以新增控制點並拖曳它。 若要移除控制點，請按兩下控制點。

  

• 若為立方貝塞爾函數，請拖曳其中一個控制點：

  

任何變更都會在 [緩動編輯器] 頂端的 [預覽] 中觸發球動畫。

另請參閱

• 開始檢視及變更 CSS。
• 檢視元素的 CSS。
• 使用 pretty-print in JavaScript 偵錯功能重新格式化縮小的 JavaScript 檔案。
• 轉譯工具，查看網頁在不同顯示選項或視力缺陷下的外觀。
• 將虛擬狀態新增至類別。
• 命令功能表
• 強制開發工具進入預覽列印模式。
• 使用本機複本覆寫網頁資源 ([覆寫] 索引標籤) 。
• 編輯和儲存工作區中的檔案 (來源工具 [工作區] 索引標籤) 。
• 使用 [模擬轉譯頁面中的深色或淺色配置] 中的 [轉譯] 工具模擬深色或淺色模式。
• 檢查深色佈景主題和淺色佈景主題的對比問題
• 對齊格線項目及其內容： [ 檢查 CSS] 格線版面配置中的格線編輯器快顯視窗。
• 使用 [色彩選擇器] 測試文字與色彩對比
• [樣式] 窗格鍵盤快速鍵。

示範：

• 待辦事項應用程式
• 檢視 @property at-rules
• 檢視 @supports at-rules
• 檢視 @scope at-rules
• 檢視 @font-palette-values at-rules
• 檢視 @position-try at-rules
• 模擬焦點所在的頁面
• 醒目提示虛擬元素
• 串聯圖層
• 1DIV
• 動畫屬性示範頁面

MDN：

• 使用 CSS 自訂屬性 (變數)
• padding CSS 屬性
• 特異性
• ) (--* 自訂屬性：CSS 變數
  • ) (--* 自訂屬性：CSS 變數
• @scope CSS at-rule
• @position-try CSS at-rule
• @font-palette-values CSS at-rule
• 盒裝模型
• 頁面可見度 API
• :active
• :focus
• :focus-within
• :target
• :hover
• :focus-visible
• CSS 串聯簡介
• 虛擬元素
• 串聯圖層。
• 什麼是 CSS？
• 選取器類型 以 特異性顯示。
• animation-timing-function
• transition-timing-function
• 貝塞爾曲線

GitHub：

• VS Code 自訂資料 - 「microsoft / vscode-custom-data」存放庫。

Web.dev：

• @property：賦予CSS變數超能力
• prefers-color-scheme：你好黑暗，我的老朋友

Chrome for Developers 部落格：

• 凍結螢幕 & 檢查消失的元素
• 自動深色佈景主題

Chrome 文件：

• 在 Chrome 文件中編輯動畫期間的 ：：view-transition 偽元素：檢查和修改 CSS 動畫效果。
• 使用 Chrome 文件中的 View Transition API 進行平滑的轉換。

material.io：

• 色彩系統中的色彩用法和調色盤：[材質設計] 調色盤。

注意事項

本頁面的部分內容是根據 Google 建立和分享 的作品進行修改，並根據知識 共享署名 4.0 國際授權條款中所述的條款使用。 原始頁面可在 此處 找到，由 Kayce Basques 撰寫。

本作品已根據 知識共享署名 4.0 國際許可證獲得許可。