在td內的span不會覆蓋td樣式

Question

我在td里面有一個span標簽。 td有一個CSS類，用於將text-decoration設置為underline ，而span則將text-decoration為none 。 我希望span內的文本不加下划線，但出於某種原因，它是。 為什么？

 .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

無法刪除后代的下划線樣式。

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

后代元素的'text-decoration'屬性不會對祖先的裝飾產生任何影響。

Answer 2

根據CSS2規范， http ： //www.w3.org/TR/CSS21/text.html#lining-striking-props ：

對於建立內聯格式化上下文的塊容器，裝飾將傳播到匿名內聯元素，該元素包裝塊容器的所有流入內聯級子級。

這意味着任何文本和任何內聯元素（如<b> ， <em>和<span>都包含在應用文本修飾的匿名內聯框中。

此外，在子內聯元素的情況下，您可以應用另一個文本修飾，允許您在一段文本上同時顯示下划線和上划線。 在這種情況下，在一個匿名內聯框中繪制下划線，並在第二個（嵌套）匿名內聯框上繪制上線。

在此示例中， td元素充當塊容器。

但是，這不適用於inline-blocks 。

請參閱演示： http ： //jsfiddle.net/audetwebdesign/MSUHx/