Question

我正在使用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>似乎是确定文本装饰的那个。

有没有办法做到这一点？

我知道这可能与Is there a CSS parent selector?相同但希望有人可以针对此特定情况提出一个明智的解决方案。

Answer 1

是的

将display:inline-block应用于孩子不要下划线。

u {
font-size:3rem
}

u i {
  text-decoration: none !important;
  display: inline-block;
}

<u>Foo <i>Bar</i></u>

Answer 2

将white的颜色设置为text-decoration-color中的i

u i {
    text-decoration: white solid underline;
}

<u>Foo <i>Bar</i></u>

Answer 3

您还可以使用伪元素隐藏下划线：

u i {
  position:relative;
}
u i::before {
  content:"";
  position:absolute;
  bottom:1px;
  height:1px;
  left:0;
  right:0;
  background:#fff;
}

<u>Foo</u>           
<u><i>Bar</i></u>    
<u>Foo <i>Bar</i></u>

删除<u>中某些元素的下划线

3 个答案: