如何檢查 CSS 規則

發行項
02/24/2013

當您進行應用程式偵錯時，您可以檢視和變更所選 DOM 項目及其子項目的 CSS 規則。

[DOM 總管] 中的 [樣式] 和 [追蹤樣式] 索引標籤會顯示套用到所選項目的 CSS 規則。這些規則會根據 CSS 優先順序規則並依其精確性來顯示。在 [樣式] 索引標籤上，位於清單最上方的規則會最先套用到選取的項目，位於最下方的規則最後才會套用。規則套用後，便會覆寫先前套用的規則。這些規則的值可以編輯：按一下某個值、輸入新值，然後按 ENTER。變更會立即顯示在應用程式中。

在 [樣式] 和 [追蹤樣式] 索引標籤上的資訊都相同，但是在 [追蹤樣式] 索引標籤上，資訊會依屬性分組，而且規則會出現在屬性之下。屬性會依字母順序列出，而規則同樣是依精確性排序。

您在 [樣式] 和 [追蹤樣式] 索引標籤中所做的變更並非永久變更。當您停止偵錯時，變更就會遺失。

提示

若要在不停止再重新開始偵錯工具的情況下，變更原始程式碼並重新載入頁面，請使用 [偵錯] 工具列上的 [重新整理 Windows 應用程式] 按鈕，重新整理您的應用程式。如需詳細資訊，請參閱如何重新整理應用程式。

檢視和變更 CSS 規則

這個範例顯示如何檢查 CSS 規則和偵錯樣式錯誤。對於這個範例，假設您想要在分割應用程式範本中所建立的應用程式中，變更用來顯示群組標題的字型色彩。

若要檢視和變更 CSS 規則

使用 Visual Studio 的分割應用程式專案範本，建立採用 JavaScript 的 Windows 市集應用程式。
在 [方案總管] 中，開啟 items.css (您可以在 pages 資料夾中找到 items.css)。

將下列 CSS 程式碼：

    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }

取代為這個：

    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
        color: #ff6a00;
    }

這樣會新增一個樣式，該樣式會為清單中的每個項目指定色彩 #ff6a00 (橙色)。CSS 選取器 .itemspage .itemslist .item，表示 items.html 中 DIV 項目的一組類別名稱，會在即時 DOM 中做為巢狀項目出現。DIV 項目 (Element) 這個項目 (Item) 會指定清單項目 (Item)。

在 [偵錯] 工具列上，選取 [開始偵錯] 按鈕旁邊下拉式清單中的 [模擬器]。
請按 F5 以偵錯模式執行應用程式。

當應用程式完成載入時，查看清單項目的標題，例如 [群組標題：1]。色彩並未變更，因此嘗試將橙色套用至標題無效。我們將使用 [DOM 總管] 中的 CSS 索引標籤找出哪裡出錯並且修正。

提示

在應用程式出現於模擬器之後，將模擬器並排放在 Visual Studio 的旁邊。這可讓您立即看見您選擇的結果，以及您對 CSS 樣式所做的變更。
切換至 Visual Studio，然後按一下 [DOM 總管] 中的 [選取項目] (或按 Ctrl + B)。這會變更選取模式，讓您可按一下項目加以選取，並使應用程式變成前景。此模式會在按一下之後還原。這是 [選取項目] 按鈕。

提示

您也可以直接在 [DOM 總管] 中選取 HTML 元素。如需選取項目的詳細資訊，請參閱快速入門:偵錯應用程式 (JavaScript)。
在模擬器首頁的左面板中，將滑鼠游標暫留在清單中第一個項目的標題 ([群組標題：1]) 上。標題周圍會出現彩色外框，如下所示：
按一下含外框的標題。[DOM 總管] 會自動選取對應的 HTML 元素，該項目看起來類似這樣 (ID 會有所不同)。
```
<h4 class="item-title" id="_win_bind74" data-win-bind="textContent: title">Group Title: 1</h4>
```
當您在 [DOM 總管] 中選取項目時，目前頁面的名稱會出現在 [選取項目] 按鈕右邊的 [項目來源] 欄位中。您應該會看見做為 HTML 檔列出的 items.html，如下所示：

當您在 [DOM 總管] 中選取 H4 項目時，[樣式]、[追蹤樣式] 和其他索引標籤現在會顯示與 H4 項目關聯的規則。[追蹤樣式] 索引標籤會在這裡顯示，並且開啟色彩屬性：

這個檢視提供有關與色彩屬性關聯之規則的實用資訊，如下所述：
- 色彩屬性出現的第一個和第二個位置並未使用。刪除線文字表示此屬性已由相同屬性的另一個應用程式所覆寫 (根據 CSS 優先順序規則 (精確性))。
- 色彩屬性出現的第二個位置會顯示橙色方格，有助於指出這是我們新增至 CSS 檔 items.css 的 [色彩] 屬性。
- 色彩屬性出現的第三個位置是用來設定清單中項目的色彩。這個值是在 items.css 中設定，不過它是特別針對下列 CSS 選取器設定：.itemspage .itemslist .item .item-overlay .item-title。
清除色彩屬性出現之第三個位置的核取方塊。現在您會看見模擬器中項目標題的色彩全部變更為橙色。
選取色彩屬性出現的第二個位置，然後按兩下屬性值 [rgb(255, 106, 0)]。
使用鍵盤刪除 106，並輸入 255，然後按 Enter 鍵。模擬器中項目標題的色彩會全部變更為黃色。
若要變更來源 CSS 檔，請按一下 [追蹤樣式] 索引標籤上的 [items.css] 連結。這樣會開啟 items.css，您可以在其中變更色彩屬性的值。若要在不停止再重新開始偵錯工具的情況下，重新整理應用程式，請按一下 [偵錯] 工具列上的 [重新整理 Windows 應用程式] 按鈕。

請參閱

共用方式為

如何檢查 CSS 規則

檢視和變更 CSS 規則

若要檢視和變更 CSS 規則

請參閱

工作

概念

其他資源

其他資源