如何在 Chrome DevTools 中找到覆蓋樣式的特定 CSS 規則？

在Chrome 開發者工具中揭開重寫CSS 規則

在Chrome 開發者工具中檢查Web 元素通常會發現重寫的樣式。然而，找到負責此類覆蓋的規則可能有點令人畏懼。不過，別擔心，Chrome 提供了一個巧妙的機制來解決這個問題。

揭開重寫樣式規則

要追蹤重寫規則，請深入研究 元素檢查器的計算樣式面板。展開您感興趣的特定風格屬性。瞧！您將看到所有適用的 CSS 規則的列表，其中展示了負責觀察到的樣式覆蓋的獲勝者。

作為範例，讓我們探索一個具有被覆寫的「font-size」屬性的元素。在「計算樣式」面板中展開此屬性將產生如下所示的結果：

font-size: 16px;
   - overridden by <link href="style2.css" rel="stylesheet"> line 10
   - origin: <inline style></inline>

這告訴我們原始的「font-size」值是內聯設定的，但覆蓋來自「style2. css」第10 行。就這麼簡單！

以上是如何在 Chrome DevTools 中找到覆蓋樣式的特定 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！