样式
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}