Inheritance of parent text decoration - html

Question

This is very simple but it just came up on me; and, I can't believe there is nothing I can do about text-decoration inheritance.
I understand that if there is a <div> everything in there has to be underlined. But for a nested <div> with a separate class or id to take on the inheritance even if (none) is selected?!? I don't buy it. This happens with text-style as well, but not color.
#hello {
font-weight: bold;
}
#me {
text-decoration: underline;
color: #cc33cc;
}
.home {
text-decoration: none !important;
color: black;
}
<p id="hello">hello</p>
<div id="me">me
<div class="home">go</div>
</div>

Answer 1

You can position .home absolutely to prevent the text decoration from applying:
#hello {
font-weight: bold;
}
#me {
text-decoration: underline;
color: #cc33cc;
}
.home {
position: absolute;
color: black;
}
<p id="hello">hello</p>
<div id="me">me
<div class="home">go</div>
</div>
From the CSS2.1 spec:
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
You can also float it or display it as an inline-block, but doing so will place the element next to the text in the parent element rather than below it as with a block-level element. Absolutely positioning (without offsetting) will not move the element.
Since absolutely positioning an element takes it out of the flow (which is why it prevents parent text decorations from applying), this means if there are any other in-flow elements after .home that need to be aware of its position, you will need to style those accordingly. For example, the next element needs to have a top margin that is equal to its height, or something along those lines.

Answer 2

Just replace your styles with below CSS Code.
.home {
color: black;
display: inline-block;
}

Answer 3

You should try to add Combinators in css
#home {
text-decoration: underline;
color: #cc33cc;
float:Right;
}
.noDecoration, #home ~ p {
text-decoration: none;
color: black;
}
You have to write your hmtl something like this
<div id="home">
<p>Home-1</p>
</div>
<div id="home .noDecoration">
<p>Home-2</p>
</div>
I hope this will solve your problem

Answer 4

You can use > * select all the elements inside #me,
#me > * {
text-decoration: underline;
color: #cc33cc;
}