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

The problem is that text-decoration propagates to descendants:

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.

But there are two exceptions: out-of-flow and atomic inline-level descendants:

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.

Therefore, you can use display: inline-block on a child to prevent its parent's text-decoration from affecting it.

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

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

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

1 个答案: