从链接中删除下划线

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标签的一部分中使用下划线？

- Matt Burland

---

sup { display: inline-block }：上标 { 显示：内联块 } - Oriol

@Oriol：那真的有效。不确定重复适用于这里。下划线被应用到a标签上，并且会级联到子元素，即使它们被标记为不需要下划线。 - Matt Burland

这不是级联的。就像背景一样：如果在一个元素上使用background: transparent，你会看到它父元素的背景。这里发生的情况也是一样的：你可以移除装饰，但父元素的装饰仍然可见。有一些方法可以防止这种行为，正如我在这里所解释的那样。 - Oriol

现在我认为你是对的，这些问题确实足够不同，即使潜在问题是相同的。无法取消嵌套元素的删除线更好。 - Oriol

@Oriol：好的。如果你想添加你的答案，我会接受它。我的另一种方法是在a上设置text-decoration: none;，然后将我想要下划线的部分放在一个span中，并设置其text-decoration: underline，这种方法也可以，但显然不如你的好。 - Matt Burland

Answer 1

问题在于text-decoration会传递给后代元素：

当应用于内联元素或者传递到内联元素时，它会影响该元素生成的所有盒子，并且进一步传播到任何分割内联元素的块级盒子中[...]。

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

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

但有两个例外：浮动和原子内联级别的后代元素：

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

因此，您可以在子元素上使用“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>

- Oriol