css - 从链接的一部分中删除下划线

Question

有了这个:

a sup {
    text-decoration: none !important;
    color: red;

<a href="http:/example.com//">Example<sup class='tm'>&trade;</sup></a>

是否可以从 <sup> 中删除下划线？元素？ css 显然是针对正确的元素(它变成红色)，但是 text-decoration被忽略。是否只对 a 的部分 使用下划线？标签？

Answer 1

问题是 text-decoration传播给后代:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline [...]

For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container.

For all other elements it is propagated to any in-flow children.

但有两个异常(exception):out-of-flow和 atomic inline-level后代:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

因此，您可以在子级上使用 display: inline-block 来防止其父级的 text-decoration 影响它。

a > sup {
  display: inline-block; /* Remove parent's text-decoration */
  color: red;
}

<a href="http:/example.com//">
  Example<sup class='tm'>&trade;</sup>
</a>