為什麼 Chrome DevTools 中某些 CSS 屬性被劃掉？

Chrome 開發者工具中劃掉的CSS 屬性：揭秘原因

在Chrome 開發者工具中檢查HTML 元素時，您可能會遇到劃掉的情況「樣式」窗格中的CSS 屬性。這些劃掉的屬性表示闡明元素樣式的特定行為。

劃掉的屬性的含義

劃掉的屬性表示基礎樣式最初應用，但隨後被更具體的選擇器、更本地的規則或同一規則中的後續屬性覆蓋。出現此行為的原因是 CSS 規則是按照特定性和優先順序的順序應用的。

特殊情況

除了上述原因之外，劃掉的屬性還可以指示以下特殊情況：

• 註釋掉的樣式：符合規則中存在但被註解掉的樣式。
• 手動停用的樣式： 透過在 Chrome 開發者工具中取消選取來手動停用的樣式。
• 語法錯誤： 包含語法錯誤的樣式，由劃掉的文字旁的錯誤圖示指示.

範例

範例

<code class="html"><div id="my-div"></div></code>

<code class="css">/* Initially, all divs have a white background. */
div {
  background-color: white;
}

/* However, this rule overrides the previous one for divs with id "my-div". */
#my-div {
  background-color: blue;
}</code>

考慮以下範例：

在Chrome 開發工具中，檢查「my-div 」元素將顯示「背景顏色：白色」被劃掉。這表示初始白色背景色已被 ID 為「my-div」的 div 指定的後續藍色背景色覆蓋。

以上是為什麼 Chrome DevTools 中某些 CSS 屬性被劃掉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！