css "text-decoration: none" funktioniert nicht

Question

Ich verstehe nicht, warum die text-decoration: none im folgenden Code nicht funktioniert. Es kann die Unterstreichung des Wortes yes nicht entfernen.

.button { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
body { 
 
    font-family: 'Roboto', 'Microsoft JhengHei', sans-serif; 
 
    font-size: 24px; 
 
}

<a href="www.example.com"> 
 
    <div class="button" id="yes"> 
 
    Yes 
 
    </div> 
 
</a>

Wie Sie dem Beispiel unten sehen können, kann das Kind die Eltern außer Kraft setzen. Dies steht im Widerspruch zu dem obigen Problem.

.b { 
 
    color: black; 
 
} 
 
.c { 
 
    color: yellow; 
 
}

<div class="b"> 
 
    <div class="c"> 
 
    abc 
 
    </div> 
 
</div>

Answer 1

Standardmäßig hat den a Tag Effekt unterstreicht (text-decoration mit: unterstrichen), so dass diese zu entfernen, müssen Sie von a Tag nicht von seinem Kind-Elemente entfernen.

Wenn Sie sprechen wie Farbwerte können von Eltern zu Kind Element überschrieben werden, aber warum nicht Text-Dekoration?

Dies liegt daran, dass die text-decoration -Eigenschaft den Stil nicht von seinem übergeordneten Element erbt, sondern auf einem eigenen Element beruht.

Überprüfen Sie w3c reference.

Answer 2

Die Unterstreichung ist auf dem <a> Tag. Ich ziehe ein Beispiel Artabdeckung,