如何使用 CSS 覆盖包含元素的内联样式？

Question

在以下代码段中，我想覆盖内联样式，以便h1 、 h2 、 h3 、 h4标签具有写入 CSS 文件的样式。

• 我不能/允许删除内联样式（它由名为 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,0);">Dyspepsi</span></h2> <h1><strong><em><span style="color: rgb(0,0,0); line-height:2.5">Dyspepsi</span></em></strong></h1> <h2><strong><em><span style="color: rgb(0,0,0);">Dyspepsi</span></em></strong></h2> <h3><strong><span style="color: rgb(0,0,0); border-bottom: 1px solid;">Dyspepsi</span></strong></h3> <h4><strong><em><span style="color: rgb(0,0,0);">Dyspepsi</span></em></strong></h4> </div>

Answer 1

除了常规的 h1 到 h4 选择器之外，您还可以将“all”选择器*与标题选择器结合使用（作为子项），并在所有这些选择器上加上!important ：

 h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 * { line-height: 1.5 !important; } h1, h1 *, h2, h2 * { color: rgb(41, 105, 176) !important; } h3, h3 *, h4, h4 * { color: rgb(184, 49, 47) !important; }

 <div class="wrapper"> <h1>Dyspepsi</h1> <h2><span style="color: rgb(0,0,0);">Dyspepsi</span></h2> <h1><strong><em><span style="color: rgb(0,0,0); line-height:2.5">Dyspepsi</span></em></strong></h1> <h2><strong><em><span style="color: rgb(0,0,0);">Dyspepsi</span></em></strong></h2> <h3><strong><span style="color: rgb(0,0,0); border-bottom: 1px solid;">Dyspepsi</span></strong></h3> <h4><strong><em><span style="color: rgb(0,0,0);">Dyspepsi</span></em></strong></h4> </div>