除了#myspan元素外，我试图在链接上加下划线，在任何情况下我都不希望下划线。我还想更改#myspan的颜色。该规则似乎不适用于它。如果我颠倒顺序，但未在“ a”下划线但在#myspan下划线，则似乎适用该规则。我已经看到链接的文本装饰和跨此链接无效。
a { text-decoration: underline; } a #myspan { color: black; text-decoration: none; } a:active #myspan { color: grey; text-decoration: none; } a:visited #myspan { color: yellow; text-decoration: none; } a:hover #myspan { color: red; text-decoration: none; } <a href="#">A link <span id="myspan">some additional information</span></a>
将元素设置为inline-block不会受到下划线的影响：
inline-block
a { text-decoration: underline; } a #myspan { color: black; display:inline-block; } a:active #myspan { color: grey; } a:visited #myspan { color: yellow; } a:hover #myspan { color: red; } <a href="#">A link <span id="myspan">some additional information</span></a>
请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级别后代（例如内联块和内联表）的内容。
要删除文本和跨度之间的小空间，您可以摆脱空白并使用较小的边距：
a { text-decoration: underline; } a #myspan { color: black; display:inline-block; margin-left:4px; } a:active #myspan { color: grey; } a:visited #myspan { color: yellow; } a:hover #myspan { color: red; } <a href="#">A link<span id="myspan">some additional information</span></a>
