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

Question

In the following snippet, I want to override the inline style so h1,h2,h3,h4 tags have the style written in the CSS file.

• I cannot/allowed to remove the inline style (it is produced by an HTML editor named Froala)
• We don't know the inline style applied to which element, it might be the h tag itself or span or any other child/nested element.
• We don't know how many nested elements exist.
• For ease, we can assume that inline style is always applied to span but span can be 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

You can use the "all" selector * in combination (as a child) of the heading selectors in addition to the regular h1 to h4 selectors, plus !important on all of them:

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>