CSS去掉子元素继承的下划线样式

Question

样式
p{text-decoration:underline;}
span{text-decoration:none;}
html
<p>这段文本加了下划线。<span>名字</span></p>

不能去掉span的下划线样式。内联样式也不行。求解？

Answer 1

因为你对<p>设置的text-decoration:underline;并没有被<span>所继承，所以你对span设置text-decoration:none;是无效的

如果要在一段文字当中去掉某一段的下划线，可以修改结构，使用行内元素
span{text-decoration:underline;}
<span>Hello</span>,<em>First</em><span>CSS<span>

不改变当前结构，也可以更改span为行内块元素
span{display:inline-block;text-decoration:none}

Answer 2

你确定是继承的吗？你难道不觉得，因为它仅仅是看上去有下划线，其实，下划线只是在P上面，而span在p里面，这样就导致，span好像继承了这个属性。

Answer 3

请使用!importnt, 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级.

span{text-decoration:none !important;}

Answer 4

我的理解是你想要让p下一部分有下划线但是p下的span是没有下划线的，
我想反过来问一下，为什么不让p下的span有下划线，这样你的样式表只需要写成
p span{text-decoration:underline;}
p下不想要下划线的地方就不放span呗，或者你用个class来控制不是更好么

Answer 5

赞同 @松鼠闹IT 的说法。

text-decoration 不是可继承属性。

请参照css参考手册：http://css.doyoe.com/properties/text-decoration/text-decoration.htm