<分区>
标签 css css-selectors
<分区>
我正在使用 Chrome 插件将自定义样式表调整应用于其他人的网站(即我无法更改 HTML)。
我想停止在下划线 ( <i> ) 元素内给斜体 ( <u> ) 文本加下划线，同时保留 <u> 内其他部分的正常下划线.
例如，这些是我所追求的:
<u>Foo</u> --> Foo (underlined)
<u><i>Bar</i></u> --> Bar (not underlined)
<u>Foo <i>Bar</i></u> --> Foo (underlined) Bar (not underlined)
我试过:
u i {
text-decoration: none !important;
}
但是发现改变<i>的text-decoration|没有区别。外层<u>似乎是决定文本装饰的那个。
有办法吗？
我知道这可能是 Is there a CSS parent selector? 的副本 但希望有人能够为这个特定案例想出一个聪明的解决方法。
最佳答案
是的。
将 display:inline-block 应用到不带下划线的 child 。
u {
font-size:3rem
}
u i {
text-decoration: none !important;
display: inline-block;
}<u>Foo <i>Bar</i></u> 关于css - 从 <u> 中的某些元素中删除下划线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53759520/