如何覆盖内联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中文网其他相关文章！