I have a scenario where I applied text-decoration: underline; to the parent li, which is being inherited by the child li. Despite trying to remove this style from the child elements using
text-decoration: none !important;My query is: Why does the text-decoration: none; rule not successfully remove the underline decoration from nested li items (such as frogs and toads)? I would appreciate a detailed explanation in response.
ul li {
text-decoration: underline;
}
ul li ul li {
text-decoration: none !important;
/* It is not working */
}<ul>
<li>Length: 15-20 inches</li>
<li>Peak Breeding Activity: March-April</li>
<li>Typical foods:
<ul>
<li>frogs</li>
<li>toads</li>
<li>salamanders</li>
<li>earthworms</li>
<li>minnows</li>
<li>mice</li>
</ul>
</li>
</ul>