昨天我們花了一點時間看了如何使用樣式控制台 (Styles pane) 來檢視樣式，今天我們則要來看如何動態編輯樣式。

再次提醒大家，我們在元素面版裡的編輯都是暫存在記憶體裡，當你重新整理頁面後這些內容都會消失

開關樣式

你可以使用樣式控制台來打開及關閉某個選擇器 (CSS selectors) 的樣式，當你的滑鼠移到選擇器的區塊時，你就會看到每一個樣式屬性的前面出現了一個 checkbox
你可以打開及關閉這個屬性 (被關閉的樣式會被加上刪除線)，並且效果會馬上出現在畫面上。

圖片1: 開關某個特定樣式

編輯樣式

當要編輯某選擇器的屬性的時候，直接用滑鼠左鍵點選那個屬性或是那個屬性的值然後就可以開始編輯了。這個編輯器有支援自動完成，當你在輸入時它就會提供你
一些建議的樣式屬性跟值 (使用 Tab 或 Enter 鍵來自動完成)。編輯完成後，就像編輯文件物件模型一樣，在樣式控制台的空白處滑鼠按一下滑鼠左鍵就可以完成編輯。如果你想取消編輯，可以使用 ESC 鍵。

圖片2: 進入編輯模式的畫面

另一個編輯的方式是點選該選擇器的樣式來源，這時候開發者工具會帶你到原始碼面版，然後你就可以在這裡編輯。我自己很少在這邊編輯，因為常常我在調整樣式
時，也需要調整文件物件模型，如果你切換到原始碼面版了，就沒有文件物件模型可以參考了。

這邊要特別提到，如果你是在編輯文字顏色或是背景顏色，你可以在值前面的顏色小圖示上點一下，它就會打開調色盤讓你選擇顏色。然後如果你想切換不同的色彩模式，你可以在顏色小圖示上值上用 Shift 鍵 + 點一下滑鼠左鍵去切換不用的模式 (有 RGB, HSL, HEX 等可以選)

圖片3: 使用開發者工具提供的調色盤來選擇顏色

在這裡的編輯一樣有支援取消 (Undo) (Mac 使用 Cmd+Z，Windows 用 Ctrl+Z) 及重做 (Redo) 的功能 (Mac Cmd+Shift+Z，Windows 用 Ctrl+Y)

編輯行內樣式

每一個元素的樣式中，都會有一個叫做 element.style {} 的選擇器在這個元素的最上方 (也代表它的權重較高)，當你新增或編輯這裡面的樣式，開發者工具就會把這些樣式加在文件物件模型元素行內裡 (Inline)

圖片4: 編輯行內樣式

編輯擬類別選取項 (Pseudo classes)

就像我們昨天所討論到了，元素的擬類別選取項可以透過樣式控制台來檢查。它也可以用來編輯，一樣透過 :hov 小圖示來打開狀態下拉選單，選擇你想要編輯的不同狀態後，如果這個元素有定義這些不同的選取項，就可以對它做修改。

圖片5: 打開 hover 擬類別選取項後，就可以針對這個選取項進行修改

新增屬性

要在樣式選擇器裡新增屬性時，使用滑鼠左鍵在選擇器的大括號 {} 後方空白的區塊點一下，這時候就會出現一個空白的屬性讓你編輯。

圖片6: 新增一個空白屬性

另一個方法是先點選要新增屬性的選擇器的其中一個屬性，然後再用 Tab 鍵切換屬性，當切換到最後一個屬性之後，就會出現一個空白的屬性。

在選擇器中，你可以使用 Tab 鍵及 Shift+Tab 鍵在樣式及屬性中做切換

刪除屬性

其實我很少用到這個功能，因為就像前面說的，樣式是可以開關的，但是如果你真的很想把某個特定的屬性刪除，你可以在點選那個屬性或是選擇它的值，然後用 Delete
鍵把屬性或是值刪除，然後再完成編輯就把這個屬性刪掉了。

新增及編輯選擇器

有時候我們想要編輯的元素其實還沒有選擇器，所以是沒辦法編輯它的樣式的，所以我們可以使用右上角的小圖式 ，讓開發者工具幫我們自動產生一組選擇器，它會依照這一個元素的標籤名稱或是 ID 及 Class 來命名 (它有一個命名規則，但是我沒有研究)，新增後就可以直接開始新增屬性。

要編輯某個選擇器的方式跟編輯選擇器的屬性一樣，在選擇器上用點一下滑鼠左鍵就可以編輯了。

新增一個 CSS Class

使用 .cls 的小圖示，它會出現一個小方框，讓你可以新增一組 class 名稱在目前選定的元素上。

使用區塊模型模擬圖

如果大家還記得我們昨天有提到這個模擬圖，你也可以直接使用這個模擬圖來做元素長寬等數值的修改，只要在數值上用滑鼠左鍵點二下就可以編輯了。

圖片7: 直接在區塊模型上修改高度

小結

今天我們很快速的把動態編輯元素樣式的方式跟大家介紹完了。動態樣式編輯是我每天的工作流程之一，而且每次完成編輯後我就會把完成的樣式從樣式控制台拷貝，然後貼回我的編輯器裡，存檔後再回來確認修改，這樣的流程是很快速而且可以準確的確認瀏覽器在樣式更動後的畫面。希望大家可以試試看 :)