Span innerhalb von td überschreibt nicht td style

Question

Ich habe ein span tag innerhalb einer td. Die td hat eine Klasse mit CSS, um die text-decoration auf underline zu setzen, während die span die text-decoration auf none setzt. Ich erwarte, dass der Text innerhalb der span nicht unterstrichen wird, aber aus irgendeinem Grund ist es. Warum?

.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

Kann die unterstrichene Stil für Nachkommen nicht entfernen.

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

Die ‚text-decoration‘ Eigenschaft auf Nachkommen Elementen nicht hat keine Wirkung auf der Dekoration des Vorfahren.

Answer 2

Gemäß dem CSS2 spec, http://www.w3.org/TR/CSS21/text.html#lining-striking-props:

Für Blockbehälter, die einen Inline-Formatierungskontext herzustellen, sind die Dekorationen auf ein anonymes Inline-Element fortgepflanzt, die alle in Strömungs wickeln Kinder Inline-Ebene des Blockcontainers. Diese

bedeutet, dass jeder Text und andere Inline-Element wie <b>, <em><span> und alle in einem anonymen Inline-Box verpackt sind, auf dem der Text Dekoration aufgebracht wird.

Darüber hinaus können Sie im Falle eines untergeordneten Elements für untergeordnete Elemente eine weitere Textdekoration anwenden, die es Ihnen ermöglicht, sowohl Unterstreichungen als auch Überstreichungen in einer Textspanne anzuzeigen. In diesem Fall wird die Unterstreichung in einer anonymen Inline-Box gezeichnet und die Überstreichung in einer zweiten (verschachtelten) anonymen Inline-Box gezeichnet. In diesem Beispiel fungiert das Element td als Blockcontainer.

Dies gilt jedoch nicht für inline-blocks.

Siehe die Demo an: http://jsfiddle.net/audetwebdesign/MSUHx/