CSS 功能參考資料

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

在這個 Chrome DevTools 功能參考資料中，探索與查看及變更 CSS 相關的新工作流程。

如要瞭解 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') 等查詢，然後在結果上按一下滑鼠右鍵，並選取「在元素面板中顯示」。

查看 CSS

使用「元素」 >「樣式」和「計算」分頁標籤，查看 CSS 規則並診斷 CSS 問題。

使用連結導覽

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

• 在 CSS 規則旁，轉到樣式表單和 CSS 來源。這類連結會開啟「來源」面板。如果樣式表單已經過精簡，請參閱「讓精簡檔案可讀」。
• 在「Inherited from ...」部分，將元素設為父項元素。
• 在 var() 呼叫中，將其指向自訂屬性宣告。
• 在 animation 簡寫屬性中，改為 @keyframes。
• 說明文件工具提示中的「瞭解詳情」連結。
• 還能使用更多其他功能。

以下是其中幾項重點：

連結的樣式可能不同。如果不確定某個項目是否為連結，請嘗試點選該項目，看看是否會連往其他頁面。

查看 CSS 說明文件、特定性和自訂屬性值的工具提示

將滑鼠游標懸停在特定元素上時，元素 > 樣式會顯示含有實用資訊的工具提示。

查看 CSS 說明文件

如要查看 CSS 簡短說明的工具提示，請將滑鼠游標懸停在「Styles」分頁中的屬性名稱上。

注意：開發人員工具會從 VS Code 自訂資料中提取工具提示說明。

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

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

如要重新開啟這些功能，請依序選取 「設定」 >「偏好設定」 >「元素」 > 「顯示 CSS 說明工具提示」。

檢視選取器的特定性

將滑鼠游標懸停在選取器上，即可查看含有特定性權重的工具提示。

查看自訂屬性的值

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

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

「Styles」分頁會辨識多種 CSS 問題，並以不同方式標示這些問題。

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

只查看實際套用至元素的 CSS

「Styles」分頁會顯示套用至元素的所有規則，包括已覆寫的宣告。如果您不想查看已覆寫的宣告，請使用「Computed」分頁，只查看實際套用至元素的 CSS。

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

勾選「Show All」核取方塊，即可查看所有房源。

請參閱「瞭解『計算』分頁中的 CSS」。

依照字母順序查看 CSS 屬性

使用「計算」分頁。請參閱「只查看實際套用至元素的 CSS」。

查看繼承的 CSS 屬性

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

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

查看 CSS 位置規則

At-rule 是 CSS 陳述式，可讓您控制 CSS 行為。「Elements」 >「Styles」會在專屬部分顯示下列 at-rule：

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

查看 @property at-rules

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

將滑鼠游標懸停在「Styles」分頁中該屬性的名稱上，即可在「Styles」分頁底部的可收合 @property 區段中，看到含有屬性值、描述符和註冊連結的工具提示。

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

查看 @supports at-rules

如果 @supports CSS 位置規則套用至元素，樣式分頁會顯示這些規則。舉例來說，請檢查下列元素：

如果瀏覽器支援 lab() 函式，元素會顯示為綠色，否則會顯示為紫色。

注意：在撰寫本文時，只有 Safari 支援 CIELAB 色彩空間。

查看 @scope at-rules

如果您將 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. 在「樣式」分頁中，找出 @scope 規則。

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

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

查看 @font-palette-values at-rules

您可以使用 @font-palette-values CSS at-rule 自訂 font-palette 屬性的預設值。在「元素」 >「樣式」中，您會在專屬區段中看到這個 at-rule。

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

1. 在預覽畫面中檢查第二行文字。
2. 在「Styles」中，找出 @font-palette-values 部分。

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

如要編輯自訂值，請按兩下該值。

查看 @position-try at-rules

您可以使用 @position-try CSS 規則和 position-try-options 屬性，為元素定義其他錨點位置。詳情請參閱「CSS 錨點定位 API 簡介」。

「元素」 >「樣式」會解析並連結下列項目：

• position-try-options 屬性值至專用 @position-try --name 部分。
• 將 position-anchor 屬性值和 anchor() 引數傳遞至含有 popovertarget 屬性的對應元素。

在下一個預覽畫面中檢查 position-try-options 值和 @position-try 部分：

使用錨點搭配 popover 的示範

1. 在預覽畫面中開啟子選單，也就是按一下「YOUR ACCOUNT」，然後點選「STOREFRONT」。
2. 在預覽畫面中檢查含有 id="submenu" 的元素。
3. 在「樣式」中，找出 position-try-options 屬性，然後按一下其 --bottom 值。點選「Styles」分頁標籤，即可前往對應的 @position-try 部分。
4. 按一下 position-anchor 值連結或相同的 anchor() 引數。「Elements」面板會選取具有對應 popovertarget 屬性的元素，而「Styles」分頁會顯示元素的 CSS。

如要編輯值，請連按兩下。

查看元素的盒模型

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

如要變更值，請連按兩下。

搜尋及篩選元素的 CSS

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

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

如要前往「Computed」分頁，請勾選「Group」，將篩選出的屬性分組為可收合類別。

模擬已聚焦的網頁

如果您將焦點從網頁切換至開發人員工具，部分疊加元素會在受到焦點觸發時自動隱藏。例如下拉式清單、選單或日期挑選器。check_box 模擬已聚焦的網頁 選項可讓您對此類元素進行偵錯，就像是該元素處於聚焦狀態一樣。

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

請嘗試在這個示範頁面上模擬已聚焦的網頁：

1. 將焦點放在輸入元素上。另一個元素會顯示在下方。
2. 開啟開發人員工具。開發人員工具視窗現在是焦點，而非網頁，因此元素又會再次消失。
3. 在「Elements」 >「Styles」中，按一下「:hov」，勾選「Emulate a focused page」check_box，並確認已選取輸入 元素。您現在可以檢查底下的元素。

您也可以在「算繪」面板中找到相同的選項。

如要瞭解更多凍結元素的方式，請參閱「凍結畫面並檢查消失的元素」。

切換擬造類別

如何切換擬造類別：

1. 選取元素。
2. 在「元素」面板中，前往「樣式」分頁。
3. 按一下 :hov。
4. 勾選要啟用的擬造類別。

在這個範例中，您可以看到 DevTools 會將 background-color 宣告套用至元素，即使元素並未實際懸停在游標上也一樣。

「Styles」分頁會針對所有元素顯示下列疑似類別：

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

此外，部分元素可能會有自己的擬造類別。選取這類元素後，「Styles」分頁會顯示「Force specific element state」部分，您可以展開該部分並開啟元素專屬的擬造類別。

如需互動式教學課程，請參閱「在類別中新增疑似狀態」。

查看繼承的醒目顯示擬似元素

擬元素可讓您為元素的特定部分設定樣式。醒目提示擬似元素是具有「已選取」狀態的文件部分，並以「醒目顯示」樣式呈現，向使用者顯示這項狀態。例如 ::selection、::spelling-error、::grammar-error 和 ::highlight 等偽元素。

如規格說明所述，當多種樣式發生衝突時，系統會依照層疊順序決定優先採用的樣式。

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

如要進一步瞭解規則的繼承和優先順序，您可以查看繼承的醒目顯示偽元素：

1. 檢查下方文字。

   我繼承了父項的醒目顯示偽元素樣式。選我！

2. 選取上述文字的一部分。

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

查看串連層

層級連結可讓您更明確地控管 CSS 檔案，避免樣式專屬性發生衝突。這對大型程式碼集、設計系統，以及在應用程式中管理第三方樣式時非常實用。

如要查看層疊式層級，請檢查下一個元素，然後依序開啟「Elements」 >「Styles」。

在「樣式」分頁中，查看 3 個級連層和其樣式：page、component 和 base。

如要查看圖層順序，請按一下圖層名稱或 「切換 CSS 圖層檢視畫面」按鈕。

page 層的特定性最高，因此元素的背景為綠色。

在列印模式中查看頁面

如何在列印模式中查看頁面：

1. 開啟指令選單。
2. 開始輸入 Rendering，然後選取 Show Rendering。
3. 在「模擬 CSS 媒體」下拉式選單中，選取「print」。

使用「涵蓋率」分頁查看已使用和未使用的 CSS

「涵蓋率」分頁會顯示網頁實際使用的 CSS。

1. 按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS)，即可在 DevTools 處於焦點狀態時開啟指令選單。

2. 開始輸入 coverage。

   

3. 選取「顯示涵蓋率」。畫面上會顯示「Coverage」分頁。

   

4. 按一下 「重新載入」。頁面會重新載入，而「Coverage」分頁會提供瀏覽器載入的每個檔案使用了多少 CSS (和 JavaScript) 的總覽。

   

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

5. 按一下 CSS 檔案，即可在上述預覽畫面中逐行查看該檔案使用的 CSS。

   

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

強制進入列印預覽模式

請參閱「強制將開發人員工具切換至列印預覽模式」。

複製 CSS

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

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

如要複製 CSS：

1. 選取元素。
2. 在「元素」 >「樣式」分頁中，按一下 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」分頁中對所有宣告所做的變更。

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

變更 CSS

本節列出在「Elements」 >「Styles」中變更 CSS 的所有方式。

此外，您還可以：

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

在元素中加入 CSS 宣告

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

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

您應該使用哪種工作流程？在多數情況下，您可能會想使用內嵌宣告工作流程。內嵌宣告的特定性高於外部宣告，因此內嵌工作流程可確保變更會在元素中生效，符合您的預期。如要進一步瞭解特定性，請參閱「選取器類型」。

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

新增內嵌宣告

如要新增內嵌宣告，請按照下列步驟操作：

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

4. 輸入該屬性的有效值，然後按下 Enter 鍵。在 DOM 樹狀結構中，您可以看到 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 + Up (Mac) 或 Alt + Up (Windows、Linux)，即可以 0.1 為單位遞增。
• 向上：將值增加 1，如果目前的值介於 -1 和 1 之間，則會增加 0.1。
• 按下 Shift 鍵 + 向上鍵，可將數字增加 10。
• 按下 Shift + Command + 向上鍵 (Mac) 或 Control + Shift + 向上鍵 (Windows、Linux)，即可將值增加 100。

遞減也適用。只要將先前提到的每個 Up 例項替換為 Down 即可。

變更長度值

已淘汰： 這項功能已在 Chrome 123 中淘汰。如要暫時重新開啟，請清除「設定」 >「Experiments」 >「check_box」「Deprecate CSS <length> authoring tool in the Styles tab」。歡迎在 crbug/1522657 中提供意見回饋。

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

如何變更長度單位：

1. 將滑鼠游標懸停在單位名稱上，並注意該名稱會加上底線。

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

如要變更長度值，請按照下列步驟操作：

1. 將游標懸停在單位值上，您會發現游標會變成水平雙向箭頭。

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

如要將值調整 10，請在拖曳時按住 Shift 鍵。

為元素新增類別

如何為元素新增類別：

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

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

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

1. 在「元素」 >「樣式」分頁中，按一下「切換一般算繪模擬功能」。

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

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

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

切換類別

如要啟用或停用元素上的類別，請按照下列步驟操作：

1. 在 DOM 樹狀結構中選取元素。
2. 開啟「元素類別」部分。請參閱「為元素新增類別」。在「Add New Class」方塊下方，列出所有套用至此元素的類別。
3. 找出要啟用或停用的類別，然後切換旁邊的核取方塊。

新增樣式規則

如要新增樣式規則，請按照下列步驟操作：

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

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

選擇要新增規則的樣式表

新增樣式規則時，請按住「新樣式規則」，選擇要新增樣式規則的樣式表單。

切換宣告

如要開啟或關閉單一宣告，請按照下列步驟操作：

1. 選取元素。
2. 在「Styles」分頁中，將滑鼠游標懸停在定義宣告的規則上。每個宣告旁都會顯示勾選方塊。
3. 勾選或取消勾選宣告旁的核取方塊。清除宣告後，DevTools 會將其劃掉，表示該宣告已無效。

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

在動畫期間編輯 ::view-transition 疑似元素

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

詳情請參閱「使用 View Transitions API 打造流暢簡單的轉場效果」。

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

請參閱「檢查 CSS 格線」中的相應章節。

使用顏色挑選器變更顏色

請參閱使用顏色挑選器檢查和偵錯 HD 和非 HD 顏色。

使用角度時鐘變更角度值

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

如何開啟 Angle Clock：

1. 選取元素，並宣告角度。

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

   

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

3. 按一下預覽畫面，即可開啟 Angle Clock。

   

4. 如要變更角度值，請按一下「Angle Clock」圓圈，或使用滑鼠捲動，將角度值增加 / 減少 1。

5. 您可以使用其他鍵盤快速鍵來變更角度值。詳情請參閱「樣式」窗格鍵盤快速鍵。

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

Shadow 編輯器提供 GUI，可用於變更 text-shadow 和 box-shadow CSS 宣告。

如要使用陰影編輯器變更陰影，請按照下列步驟操作：

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

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

   

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

   

4. 變更陰影屬性：

   • 類型 (僅限 box-shadow)。請選擇「外框」或「內框」。
   • X 和 Y 位移。拖曳藍點或指定值。
   • 模糊處理。拖曳滑桿或指定值。
   • Spread (僅適用於 box-shadow)。拖曳滑桿或指定值。

5. 觀察套用至元素的變更。

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

Ease 編輯器提供 GUI，可用於變更 transition-timing-function 和 animation-timing-function 的值。

如要開啟Ease 編輯器：

1. 選取含有時間函式宣告的元素，例如本頁的 <body> 元素。
2. 在「Styles」分頁中，找出 transition-timing-function、animation-timing-function 宣告或 transition 簡寫屬性旁的紫色 圖示。
3. 按一下圖示即可開啟Ease-in 編輯器：

使用預設值調整時間

如要透過點按調整時間，請使用Easer Editor 中的預設值：

1. 如要在Easening 編輯器中設定關鍵字值，請按一下下列任一挑選器按鈕：
   • linear
   • ease-in-out
   • ease-in
   • ease-out

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

   • 線性預設值：elastic、bounce 或 emphasized。
   • Cubic Bezier 預設值：

時間關鍵字	預設	三次方貝茲
先加速後減速	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In Out、Quadratic	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	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、正弦	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)
	在、返回	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)
	Out, Quadratic	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	結束，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 變更內容

注意：如要啟用這項實驗功能，請依序前往「Settings」>「Experiments」>「Styles」分頁標籤下方的「Sync CSS changes」，然後勾選該核取方塊，並重新載入 DevTools。

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

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

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

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