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

Question

在下面的代码片段中，我想覆盖内联样式，所以 h1、h2、h3、h4 标签的样式写在 CSS 文件.

我 cannot/allowed 删除内联样式（它是由一个名为 Froala 的 HTML 编辑器生成的）
我们不知道应用于哪个元素的内联样式，它可能是 h 标记本身或 span 或任何其他 child/nested 元素。
我们不知道有多少嵌套元素存在。
为方便起见，我们可以假设内联样式始终应用于 span，但 span 可以是 n-th child

.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 选择器外，您还可以结合使用标题选择器的“全部”选择器 *（作为 child），加上 !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>

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

How can I override inline styles on contained elements with CSS?

html

css

css-selectors

inline-styles