html - How to avoid child elements to get text-decoration style from body element's style

Question

HTML example:

<span>line1</span>
<div id="div1" class="no-underline">
    <div id="div2" class="no-underline">subline1</div>
    <div>subline2</div>
</div>

body {
    font-family: Arial;
    font-size: 8px;
    color: rgb(255, 0, 85);
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}
#div1 {
    color: black !important;
}
#div2 {
    color: green;
}
.no-underline {
    text-decoration:none !important;
}

The result is :

• line1: red and underlined
• subline1: green and underlined
• subline2: black and underlined

Demo here

I want subline1 and subline2 not underlined. But body's style should stay at my case.

How is this possible?

Answer 1

First I would recommend to avoid using inline Css and !important, that's a bad practice and will make your code very hard to modify later. one solution would be to put your text decoration on the span:

<span style ="text-decoration: underline;">
line1
</span>