使用Chrome 開發者工具識別覆蓋CSS 規則
使用Chrome 的開發者工具研究CSS 樣式時,您可能會遇到樣式被標記為覆蓋的情況。要找出覆蓋它的特定規則,請按照以下步驟操作:
-
開啟元素檢查器: 選擇您要檢查其樣式的元素。右鍵單擊並選擇“檢查元素”或使用“Ctrl Shift C”鍵盤快速鍵。
-
找到計算樣式面板:在檢查器的右側面板中,按一下「計算」標籤。
-
展開屬性:標識被覆寫的 CSS 屬性。按一下屬性名稱旁邊的箭頭將其展開。
-
查看適用的規則:展開的屬性將顯示適用於該元素的所有CSS 規則的列表,包括覆蓋的規則
-
確定獲勝規則: 目前具有最高特異性(基於CSS 級聯)的規則將突出顯示並標記為「獲勝」規則。
範例:
如果 CSS 屬性「顏色」被覆蓋,您將看到定義元素「顏色」屬性的所有規則的清單。具有最高特異性的「獲勝」規則將標有更粗的字體粗細和深綠色複選標記。
以上是如何識別 Chrome DevTools 中的覆蓋 CSS 規則?的詳細內容。更多資訊請關注PHP中文網其他相關文章!