編輯樣式
使用Styles(樣式)窗格修改與元素關聯的CSS樣式。
TL;DR
Styles(樣式)窗格允許您以盡可能多的方式更改本地CSS，包括編輯現有樣式，添加新樣式，添加樣式規則。- 如果你想要樣式持久（他們頁面重新加載而丟失），您需要將它們持久化到您的開發工作區。
檢查應用到元素的樣式
選擇一個元素[Select an element] 來檢查它的樣式。Styles(樣式)窗格將顯示所有應用於所選元素的CSS規則，優先級從高到低展示：
- 在頂部是
element.style。這些是使用style屬性直接應用於元素的樣式（例如，<p style="color:green">）(注：內聯樣式)，或是你在DevTools該區域編輯應用的。 - 下面是與元素匹配的所有CSS規則。例如，在下面的屏幕截圖中，所選元素接收
line-height:24px的規則，定義在tools.css中。 - 下面是繼承的樣式，包括匹配所選元素的祖先元素所有可繼承的樣式規則。 例如，在下面的屏幕截圖中，所選元素繼承了來自
user agent stylesheet中的display:list-item
規則。
請查看下面圖片上，與下面編號相對應的條目。
- 與匹配元素的選擇器關聯的樣式。
User agent stylesheets有明確的標記，並且經常被您的網頁上的CSS覆蓋。- 通過層疊規則被覆蓋的CSS規則，使用刪除線文本顯示。
Inherited(繼承)的樣式顯示在 "Inherited from <NODE>" 分組下。 單擊分組標題欄中的DOM節點，會導航到該節點在DOM樹視圖中的位置。 （CSS 2.1 屬性表顯示了哪些屬性是可以被繼承的。）- 灰色條目是未定義的規則，** 在運行時被計算樣式取代了 ** （注：可以理解為無效的樣式規則）。
了解層疊和繼承的工作原理對於調試樣式至關重要。層疊涉及如何給CSS聲明賦予權重，當樣式重疊時，以確定哪些規則優先於另一規則。繼承涉及HTML元素如何從包含該元素的元素（祖先元素）中繼承CSS屬性。
有關更多信息，請參閱W3C關於級聯的文檔。
查看選擇器應用的元素
將鼠標懸停在Styles(樣式)窗格中的CSS選擇器上，可以查看應用該選擇器的所有元素。
例如，在下面的屏幕截圖中，鼠標懸停在選擇器.wf-tools-guide__section-link a上。
在實際網頁中，您可以看到所有應用該選擇器的<a>元素。
** 注意：** 此功能僅突顯在可視窗口中的元素；可視窗口外的其他元素也可能會受到該選擇器的影響。
添加, 啟用, 和禁用 CSS 類
點擊.cls按鈕查看與當前選定元素相關聯的所有CSS類。從那里，你可以：
- 啟用或禁用當前與元素相關聯的類。
- 向元素添加新的類。
編輯現有的屬性名稱或值
單擊一個CSS屬性名稱或值就可以進行編輯。當突出顯示名稱或值的時候，按Tab鍵向前移動到下一個屬性，名稱或選擇器。按住Shift鍵，然后按Tab鍵向后移動。
當編輯數字的CSS屬性值時，使用以下鍵盤快捷鍵進行遞增和遞減：
- Up和Down鍵，屬性值將遞增和遞減
1，或者，如果當前屬性的值在-1和1之間，那么將遞增和遞減.1
。 - Alt+Up和Alt+Down，值將遞增和遞減
0.1。 - Shift+Up遞增
10，Shift+Down遞減10。 - Shift+Page Up（Windows，Linux）或Shift+Function+Up（Mac）將值遞增
100。Shift+Page
Down（Windows，Linux）或Shift+Function+Down（Mac）將值遞減100。 - 注：當然你可以使用鼠標滾了，來遞增或遞減值。
添加一個新的屬性聲明
單擊可編輯的CSS規則中的空白區域，可以創建新的屬性聲明。輸入，或將CSS粘貼到Styles(樣式)窗格中。屬性及其值將被解析並輸入到正確的元素CSS規則中，並且在頁面中實時展現。
注意：要啟用或禁用樣式聲明，請勾選或取消勾選其旁邊的復選框。
添加一個樣式規則
單擊New Style Rule(
)按鈕可以添加一個新的規則。
點擊並按住這個按鈕可以選擇將新的規則添加到哪個樣式表文件。
添加或刪除動態樣式（偽類）
您可以在元素上手動設置動態的偽類選擇器(例如:active, :focus, :hover, 和 :visited)
。
有兩種方法可以在元素上設置這些動態狀態:
- 右鍵單擊
Elements(元素)面板中的元素,然后從菜單中選擇目標偽類以啟用或禁用它。
- 在
Elements(元素)面板中選擇一個元素, 點擊Styles(樣式)窗格中的:hov(
)按鈕, 並使用復選框來啟用或者禁用當前所選元素的選擇器.
添加背景顏色或顏色到一個樣式規則
Styles(樣式)窗格提供了向一個樣式規則中添加顏色和背景顏色聲明的快捷方式。
在樣式規則的右下角，有一個三點的圖標。你需要將鼠標懸停在樣式規則上才能看到它。
將鼠標懸停在該圖標上，會顯示添加一個color(顏色)聲明(
)或一個background-color(背景顏色)(
)的按鈕。單擊其中一個按鈕，將聲明添加到樣式規則。
使用顏色選擇器修改顏色
要打開Color Picker（顏色選擇器,也稱作拾色器），在Styles(樣式)窗格中找到一個定義顏色(如color: blue)的CSS聲明。在聲明值的左邊有一個有顏色的小方塊。方形的顏色與聲明值匹配。點擊這個小方塊打開Color Picker（顏色選擇器）。（注：按住Shift鍵，點擊這個小方塊，可以修改顏色格式。關閉顏色選擇器可以按Esc或Enter鍵。）
您可以通過多種方式與Color Picker（顏色選擇器）進行交互，請看下圖中對應編號的說明：
Eyedropper(吸管) - 有關詳細信息，請參閱吸管。Current color(當前顏色) - 當前值的可視化顯示。Current value(當前值) - 十六進制，, RGBA, 或用 HSL 表示Current color(當前顏色) 。Color palette(調色板) - 有關詳細信息，請參閱調色板。Tint and shade selector(色調和色調選擇器)。Hue selector(色相選擇器)。Opacity selector(不透明度選擇器)。Color value selector(顏色值選擇器) - 單擊可在RGBA，HSL和十六進制之間切換。Color palette selector(調色板選擇器) - 單擊以選擇不同的模板。
吸管
點擊eyedropper(吸管)按鈕，使其啟用（
），將鼠標懸停在實際頁面的顏色上，然后單擊選定當前顏色。
調色板
Color Picker（顏色選擇器）提供以下的調色板:
Page Colors(頁面顏色) - 從頁面的CSS中自動生成的一組顏色。Material Design(配色方案) - 符合網頁設計規范的配色方案。Custom(自定義) - 一組你自己選擇過的顏色。 DevTools 會保存您的自定義調色板，甚至跨頁面，直到您刪除它。
修改自定義調色板
按plus sign(加號)按鈕將當前顏色添加到自定義調色板。單擊並按住顏色將其拖動到其他位置，或將其拖動到trash can(垃圾桶)圖標可以將其刪除。右鍵單擊顏色，然后選擇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 source maps，DevTools可以自動將生成的文件映射到原始源文件，它允許您在Sources(源代碼)面板中實時編輯這些內容，並查看結果，而無需離開DevTools或刷新頁面。
處理器的工作流程
當你檢查一個元素的樣式是由生成的CSS文件提供的，Elements(元素)面板顯示指向原始源文件的鏈接，
不是生成的CSS文件。
當你檢查一個元素的樣式是由生成的CSS文件中提供的元素時,面板會顯示一個鏈接到原始的源文件,不生成的CSS文件地址.
要跳轉到源文件:
- 點擊鏈接，在
Sources(源代碼)面板中打開（可編輯的）源文件. - 按住
Ctrl(或者Cmd)鍵，在任何CSS屬性的名稱或值上點擊，會在Sources(源代碼)面板中打開源文件並跳轉到相應的行.
當您將更改保存到DevTools中一個CSS預處理文件時，CSS預處理器將重新生成CSS文件。 然后DevTools將重新加載新生成的CSS文件。
啟用/禁用 CSS source maps 和自動加載
CSS source maps 默認是啟用的。您可以選擇啟用自動重新生成CSS輸出文件。要啟用或者禁用 CSS source maps 和 CSS重新加載：
- 打開 DevTools
Settings(設置) 然后點擊General(常規)。 - 勾選或者取消
Enable CSS source maps(啟用 CSS source maps) 和Auto-reload generated CSS(自動重新加載生成的CSS文件)。
要求 & 陷阱
- DevTools不會檢測外部編輯器中進行的更改，直到
Sources(源代碼)面板中包含關聯的源文件重新獲得焦點。 - 手動編輯由 Sass / LESS /其他編譯器生成的CSS文件將破壞源映射關聯，直到頁面重新加載。
- 使用Workspaces 工作區？確保生成的CSS文件也映射到工作區。您可以通過查看
Sources(源代碼)面板右側樹來驗證這一點，並且看到CSS是從您的本地文件夾提供。 - 為了讓DevTools在更改源文件時自動重新加載樣式，您的預處理器必須設置為每當源文件更改時重新生成CSS文件。否則您必須手動重新生成CSS文件，並重新加載頁面以查看您的更改。
- 您必須從網絡服務器（而不是
file://URL）訪問您的網站或應用，並且服務器必須提供CSS文件以及source
maps（.css.map）和源文件（.scss等）。 - 如果不使用Workspaces 工作區功能，則Web服務器還必須提供
Last-Modified標頭。
了解如何在Setup CSS＆JS預處理器中設置源映射。