如何使用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>