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

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

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

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


赞同 @松鼠闹IT 的说法。

text-decoration 不是可继承属性

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


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


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

span{text-decoration:none !important;}


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


因为你对<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}

【热门文章】
【热门文章】