使用 Styles 窗格可以修改與元素關聯的 CSS 樣式。
TL;DR
- 利用 Styles 窗格,您可以在本地以儘可能多的方法更改 CSS,包括修改現有樣式、添加新樣式,以及爲樣式添加規則。
- 如果您希望樣式可以保持(不會在重新加載後消失),則需要將其保存到您的開發工作區中。
檢查應用到元素的樣式
選擇一個元素以檢查其樣式。 Styles 窗格可以顯示應用到選定元素的 CSS 規則,優先級從高到低:
頂端爲
element.style
。這些樣式要麼直接使用樣式屬性(例如<p style="color:green">
)直接應用到元素,要麼在 DevTools 中應用。下方是與元素匹配的任何 CSS 規則。例如,在下面的屏幕截圖中,選定元素從
tools.css
中定義的規則接收line-height:24px
。再下方是繼承的樣式,其中包括與選定元素的祖先實體匹配的任何可繼承樣式規則。 例如,在下面的屏幕截圖中,選定元素從
user agent stylesheet
繼承display:list-item
。
下圖上的標籤與其下方帶編號的項目對應。
- 與元素匹配的選擇器的關聯樣式。
- User Agent 樣式表清晰標記,並且在網頁上經常被 CSS 替換。
- 已被級聯規則替換的規則將顯示爲帶刪除線的文本。
- 繼承的樣式將在“Inherited from
<NODE>
”標頭下顯示爲一組。點擊標頭中的 DOM 節點可以導航到其在 DOM 樹視圖中的位置。 (CSS 2.1 屬性表顯示了哪些屬性是可以繼承的。) - 灰色的條目不是已定義的規則,而是在運行時計算的規則。
瞭解級聯和繼承的原理對於調試樣式至關重要。 級聯與 CSS 聲明被賦予的權重有關,權重用於確定規則在與其他規則重疊時哪些規則的優先級更高。 繼承與 HTML 元素如何從其所屬元素(祖先實體)繼承 CSS 屬性有關。 如需瞭解詳情,請參閱有關級聯的 W3C 文檔。
檢查受選擇器影響的元素
在 Styles 窗格中將鼠標懸停在 CSS 選擇器上可以查看受該選擇器影響的所有元素。
例如,在下面的屏幕截圖中,鼠標懸停在選擇器 .wf-tools-guide__section-link a
上。在實時頁面中,您可以看到受選擇器影響的所有 <a>
元素。
Note:此功能僅突出顯示視口中的元素;視口以外的其他元素也可能受選擇器影響。
添加、啓用和停用 CSS 類
點擊 .cls 按鈕可以查看與當前選定元素關聯的所有 CSS 類。 從這裏,您可以執行以下操作:
- 啓用或停用當前與元素關聯的類。
- 向元素添加新類。
編輯現有屬性名稱或值
點擊 CSS 屬性名稱或值可以對其進行編輯。在名稱或值突出顯示時,按 Tab 可以向前移動到下一個屬性、名稱或選擇器。
按 Shift+Tab 可以向後移動。
編輯數字式 CSS 屬性值時,可以使用下面的鍵盤快捷鍵增大和減小值:
- 使用向上鍵和向下鍵能夠以 1 爲增量增大和減小值(如果當前值介於 -1 和 1 之間,則增量爲 0.1)。
- 使用 Alt+向上鍵和 Alt+向下鍵能夠以 0.1 爲增量增大和減小值。
- 使用 Shift+向上鍵能夠以 10 爲增量增大值;使用 Shift+向下鍵能夠以 10 爲增量減小值。
- 使用 Shift+Page Up(Windows、Linux)或 Shift+Function+向上鍵 (Mac) 能夠以 100 爲增量增大值。使用 Shift+Page Down(Windows、Linux)或 Shift+Function+向下鍵 (Mac) 能夠以 100 爲增量減小值。
添加新屬性聲明
點擊可編輯 CSS 規則中的空白處可以創建一個新聲明。 鍵入,或者將 CSS 粘貼到 Styles 窗格中。屬性及其值將解析並輸入到正確的字段中。
添加樣式規則
點擊 New Style Rule () 按鈕可以添加一個新的 CSS 規則。
點擊並按住按鈕可以選擇要向哪一個樣式表添加規則。
添加或移除動態樣式(僞類)
您可以在元素上手動設置動態僞類選擇器(例如 :active
、:focus
、:hover
和 :visited
)。
可以通過兩種方式在元素上設置動態狀態:
在 Elements 面板內右鍵點擊某個元素,然後從菜單中選擇目標僞類,將其啓用或停用。
在 Elements 面板中選擇元素,然後在 Styles 窗格中點擊 :hov 按鈕,使用複選框啓用或停用當前選定元素的選擇器。
向樣式規則添加背景色或顏色
Styles 窗格提供了一個用於向樣式規則添加 color
和 background-color
聲明的快捷方式。
樣式規則的右下角有一個由三個點組成的圖標。您需要將鼠標懸停到樣式規則上才能看到這個圖標。
將鼠標懸停到此圖標上可以調出用於添加 color
聲明 () 或
background-color
聲明 () 的按鈕。點擊這些按鈕之一可以將聲明添加到樣式規則中。
使用 Color Picker 修改顏色
要打開 Color Picker,請在 Styles 窗格中查找一個定義顏色的 CSS 聲明(例如 color: blue
)。
聲明值的左側有一個帶顏色的小正方形。
正方形的顏色與聲明值匹配。
點擊小正方形可以打開 Color Picker。
您可以通過多種方式與 Color Picker 交互:
- 取色器。請參閱取色器瞭解更多信息。
- 當前顏色。當前值的可視表示。
- 當前值。當前顏色的十六進制、RGBA 或 HSL 表示。
- 調色板。請參閱調色板瞭解更多信息。
- 着色和陰影選擇器。
- 色調選擇器。
- 不透明度選擇器。
- 顏色值選擇器。點擊可以在 RGBA、HSL 和十六進制之間切換。
- 調色板選擇器。點擊可以選擇不同的模板。
取色器
點擊取色器按鈕將其啓用 (),在實時頁面上將鼠標懸停到某種顏色上,然後點擊,將當前選定的聲明值設置爲您懸停的顏色。
調色板
Color Picker 提供了下列調色板:
- Page Colors。一組從頁面的 CSS 自動生成的顏色。
- Material Design。一組符合 Material Design 規範的顏色。
- Custom。您選擇的任意一組顏色。DevTools 可以保存您的自定義調色板(甚至在不同的頁面間),直至您將其刪除。
修改自定義調色板
按加號按鈕可以將當前顏色添加到調色板中。 點擊並按住顏色可以將其拖動到不同的位置,或者將其拖動到垃圾桶圖標進行刪除。 右鍵點擊顏色並選擇 Remove color 可以將其刪除。 選擇 Remove all to the right 可以刪除當前選定顏色右側的所有顏色。 右鍵點擊調色板區域中的任何位置,然後選擇 Clear template 可以刪除模板的所有顏色。
查看和編輯 CSS 自定義屬性(CSS 變量)
您可以查看和編輯定義或使用 CSS 自定義屬性(之前稱爲 CSS 變量)的聲明,就像查看和編輯任何其他聲明一樣。
自定義屬性通常在 :root
選擇器中定義。
要查看在 :root
中定義的自定義屬性,請檢查 html
元素。
不過,並不一定要在 :root
選擇器上定義自定義屬性。如果您在其他地方定義,請在定義元素的地方檢查元素以查看定義。
您可以查看和編輯使用自定義屬性的聲明值,就像查看和編輯任何其他聲明值一樣。
如果您看到一個像 var(--main-color)
一樣的聲明值(如下面的屏幕截圖所示),則表示聲明正在使用自定義屬性。
可以像編輯任何其他聲明值一樣編輯這些值。
目前,沒有辦法跳轉到自定義屬性定義。
編輯 Sass、Less 或 Stylus
如果您在使用 Sass、Less、Stylus 或任何其他 CSS 預處理器,則在 Styles 編輯器中編輯生成的 CSS 輸出文件不會有任何作用,因爲它們不會映射到您的源代碼。
藉助 CSS 源映射,DevTools 可以將生成的文件自動映射到源代碼文件,這樣,您可以在 Sources 面板中實時編輯這些文件並查看結果,而不用離開 DevTools 或刷新頁面。
預處理器工作流
在檢查樣式由生成的 CSS 文件提供的元素時,Elements 面板會顯示原始的源文件而不是生成的 CSS 文件的鏈接。
要跳轉到源文件,請執行以下操作:
- 點擊鏈接,在 Sources 面板中打開(可編輯)源文件。
- Ctrl + 點擊(或 Cmd + 點擊)任何 CSS 屬性名稱或值,打開源文件並跳轉到相應行。
在 DevTools 中保存對 CSS 預處理器文件的更改時,CSS 預處理器應重新生成 CSS 文件。然後,DevTools 將重新加載新生成的 CSS 文件。
啓用/停用 CSS 源映射和自動重新加載
默認情況下,CSS 源映射處於啓用狀態。您可以選擇啓用生成的 CSS 文件的自動重新加載。要啓用 CSS 源映射和 CSS 重新重新加載,請執行以下操作:
- 打開 DevTools 的 Settings 面板並點擊 General。
- 開啓 Enable CSS source maps 和 Auto-reload generated CSS。
要求和問題
- DevTools 無法檢測到在外部編輯器中進行的更改,直至包含關聯的源文件的 Sources 標籤重新獲得焦點。
- 手動修改 Sass/LESS/其他編譯器生成的 CSS 文件將中斷源映射關聯,直至頁面重新加載。
- 使用工作區?確保生成的 CSS 文件同時映射到工作區中。爲此,您可以查看 Sources 面板右側樹,確定 CSS 是從您的本地文件夾提供。
- 要使 DevTools 在您更改源文件時自動重新加載樣式,必須將您的預處理器設置爲在源文件每次發生更改時都重新生成 CSS 文件。否則,您必須手動重新生成 CSS 文件並重新加載頁面才能看到更改。
- 您必須從網絡服務器訪問您的網站或應用(不是從 file:// 網址),服務器必須提供 CSS 文件,以及源映射 (.css.map) 和源文件 (.scss, etc.)。
- 如果您未使用“工作區”功能,網絡服務器還必須提供
Last-Modified
標頭。
在設置 CSS 與 JS 預處理器中瞭解如何設置源映射。