Não é possível desfazer a decoração de texto para elementos filho

Diga que você tem este html:

<a href="#">
    This is underlined
    <span>
        This isn't.
    </span>
</a>

E este css:

a:hover {
    text-decoration: underline; /* I know, this is enabled by default. */
}

a:hover span {
    text-decoration: none !important;
}

Por que o elemento a> span ainda tem um sublinhado. Tenho certeza que você realmente deve ter desfeito a decoração usando 'none'. Eu sei que você pode alcançar o resultado desejado usando este:

<a href="#">
    <span class="underlined">
        This is underlined
    </span>
    <span>
        This isn't.
    </span>
</a>

plus este css:

a:hover {
    text-decoration: none;
}

a:hover span.underlined {
    text-decoration: underline;
}

Mas ... simplesmente não faz sentido para mim por que você não pode desabilitar a decoração de texto de um elemento filho. Então por que...

Edit: Blocos em linha

De acordo com @amosrivera, ele funciona quando você usa o bloco embutido. Posso confirmar que isso funciona no Safari e no Chrome!

a:hover span{
    text-decoration:none;
    display:inline-block;
}

Como mencionado, isso funciona para o Safari e Chrome, mas não para o Firefox. A solução a seguir funciona no Firefox, mas não no Safari e Chrome ...

a:hover span{
    text-decoration:none;
    display:block;
}

Mesinha

    CSS-Rule            |    Webkit    |    Firefox    |    Opera    |    IE    
--------------------------------------------------------------------------------
display: block;         |       x      |               |      ?      |     ?    
display: inline-block;  |              |       x       |      ?      |     ?

questionAnswers(5)

yourAnswerToTheQuestion