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

Question

在下面的 sn-p 中，我想覆盖内联样式，所以 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 选择器之外，您还可以将“全部”选择​​器 * 与标题选择器组合使用（作为子项），并在所有这些选择器上加上 !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>