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

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传播到后代：

在inline元素上指定或传播到inline元素时，它会影响该元素生成的所有框，并进一步传播到将inline [...]分割的任何流内块级框

对于建立内联格式设置上下文的块容器，装饰将传播到一个匿名的内联元素，该元素包装该块容器的所有流入的内联级别子级。

对于所有其他元素，它会传播到任何流入子对象。

但是有两个例外：流出和原子内联级别后代：

请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级别后代（例如内联块和内联表）的内容。

因此，您可以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>