如何解决如何使用CSS覆盖包含元素的内联样式?
在以下代码段中,我想覆盖内联样式,因此h1
,h2
,h3
,h4
标记具有写在CSS文件中的样式。 / p>
- 我无法/不允许删除内联样式(它是由名为Froala的HTML编辑器产生的)
- 我们不知道将内联样式应用于哪个元素,它可能是
h
标签本身或span
或任何其他子元素/嵌套元素。 - 我们不知道有多少个嵌套元素。
- 为简便起见,我们可以假定内联样式始终应用于
span
,但是span
可以是第n个子对象
.wrapper{}
h1,h2,h3,h4 {line-height:1.5 !important;}
h1,h2 > span {color:rgb(41,105,176) !important;}
h3,h4 > span {color:rgb(184,49,47) !important;}
<div class="wrapper">
<h1>Dyspepsi</h1>
<h2><span style="color: rgb(0,0);">Dyspepsi</span></h2>
<h1><strong><em><span style="color: rgb(0,0); line-height:2.5">Dyspepsi</span></em></strong></h1>
<h2><strong><em><span style="color: rgb(0,0);">Dyspepsi</span></em></strong></h2>
<h3><strong><span style="color: rgb(0,0); border-bottom: 1px solid;">Dyspepsi</span></strong></h3>
<h4><strong><em><span style="color: rgb(0,0);">Dyspepsi</span></em></strong></h4>
</div>
解决方法
除了常规的h1至h4选择器之外,您还可以结合使用“全部”选择器*
(作为子项)与标题选择器,并在所有选择器上加上!important
:>
h1,h1 *,h2,h2 *,h3,h3 *,h4,h4 * {
line-height: 1.5 !important;
}
h1,h2 * {
color: rgb(41,105,176) !important;
}
h3,h4 * {
color: rgb(184,49,47) !important;
}
<div class="wrapper">
<h1>Dyspepsi</h1>
<h2><span style="color: rgb(0,0);">Dyspepsi</span></h2>
<h1><strong><em><span style="color: rgb(0,0); line-height:2.5">Dyspepsi</span></em></strong></h1>
<h2><strong><em><span style="color: rgb(0,0);">Dyspepsi</span></em></strong></h2>
<h3><strong><span style="color: rgb(0,0); border-bottom: 1px solid;">Dyspepsi</span></strong></h3>
<h4><strong><em><span style="color: rgb(0,0);">Dyspepsi</span></em></strong></h4>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。