Zakres wewnątrz td nie zastępuje stylu td

Question

Mam tag span wewnątrz td. td ma klasę z CSS, aby ustawić text-decoration na underline, podczas gdy ustawia text-decoration na none. Spodziewam się, że tekst wewnątrz span nie zostanie podkreślony, ale z jakiegoś powodu jest. Czemu?

.u { 
 
    text-decoration: underline; 
 
} 
 

 
.no-u { 
 
    text-decoration: none !important; 
 
}

<table> 
 
    <tr> 
 
     <td class="u"> 
 
      <span class="no-u" style="text-decoration: none !important;">My Text</span> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 1

nie można usunąć podkreślony styl dla potomnych.

http://www.w3.org/TR/CSS21/text.html#lining-striking-props

'text-decoration' nieruchomość na elementach potomnych nie może mieć żadnego wpływu na dekoracji przodka.

Answer 2

Według specyfikacji CSS2 http://www.w3.org/TR/CSS21/text.html#lining-striking-props:

do pojemników blokowych ustanowienia kontekstu formatowania inline ozdoby namnaża anonimowego inline elementu, który otacza wszystkie dzieci inline w przepływowym pojemnika blokowego.

Oznacza to, że każdy tekst i każdy element inline jak <b>, <em> i <span> są opakowane w polu inline anonimowy, w którym stosowana jest dekoracja tekstu.

Co więcej, w przypadku elementu wbudowanego dla dziecka można zastosować inną dekorację tekstową, która umożliwia wyświetlanie zarówno podkreślenia, jak i podkreślenia na rozpiętości tekstu. W tym przypadku podkreślenie malowane na jednym anonimowym polu liniowym i kreskowaniu jest malowane na drugim (zagnieżdżonym) anonimowym polu liniowym. W tym przykładzie element td działa jako kontener blokowy. To nie dotyczy inline-blocks

Zobacz demo w: http://jsfiddle.net/audetwebdesign/MSUHx/