如何覆蓋內聯CSS樣式

>這篇2009年的文章仍然非常受歡迎，強調了CSS基本面的持久相關性。 如果您對現代CSS感興趣，請查看我們最近的CSS Techniques for Retina顯示器的文章。

>

CSS的力量在於其級聯的性質。了解瀏覽器如何選擇和應用樣式是至關重要的。初學者經常為此而苦苦掙扎，因為樣式應用取決於包含方法，規則順序，選擇器特異性和聲明，例如

>。 !important>。

直接在HTML中定義的內聯樣式（例如， <p> <strong style="“顏色：red;”">紅色文本<code><p><strong style="color: red;">red text</strong></p>

），具有最高優先級。 儘管通常不鼓勵使用外部樣式表，但在舊系統或HTML修改受到限制時，它們不可避免。 要覆蓋外部樣式表的內聯樣式，請使用：>

strong[style] { color: blue !important; }

這將迫使標籤的文本變為藍色，而不論內聯樣式如何。 除了IE6和7外，這也可以跨主要瀏覽器（IE8，Firefox 2，Opera 9，Safari，Chrome）。但是，這應該是最後的度假勝地。保持乾淨的CSS，僅在必要時才覆蓋內聯樣式。 考慮探索SitePoint的高級CSS技術的可學習平台。 strong>

經常詢問有關覆蓋內聯CSS 的問題（常見問題解答）

>

問：為什麼要覆蓋內聯CSS很重要？ a：覆蓋內聯CSS流線樣式，促進可重複使用性（許多頁面的樣式表），並通過Stylesheet Caching提高性能。

Q：

規則如何工作？

a：

覆蓋後續樣式聲明。 很少使用它，因為它由於其高特異性而使調試變得複雜（例如，）。 !important> >

Q：外部CSS可以覆蓋內聯樣式嗎？

a：是的，但是內聯樣式具有更高的特異性。 匹配外部CSS中的特異性或使用!important>。 color: blue !important;>

>

問：為什麼我的CSS不覆蓋內聯樣式？

問：如何增加CSS規則特異性？

a：使用更具體的選擇器（id＆gt; class＆gt; type），鏈選擇器（例如，!important），或使用

。

Q：CSS優先順序是什麼？ a：特異性和聲明順序確定優先級。內聯＆gt; id＆gt;班級＆gt;類型。

影響此順序。

!important

Q：JavaScript可以覆蓋Inline CSS？

a：是的，通過直接操縱元素的style屬性（例如document.getElementById("myElement").style.color = "blue";）。 但是，這添加了內聯樣式。

Q：如何在WordPress/Bootstrap/react中覆蓋CSS？ a：WordPress：使用兒童主題或自定義CSS插件。 Bootstrap：創建Bootstrap的CSS之後鏈接的自定義CSS文件。反應：使用內聯樣式或CSS模塊。 始終考慮選擇器特異性。

註釋已關閉。 在我們的論壇上詢問CSS問題。

>

以上是如何覆蓋內聯CSS樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！