css - 这可以在 CSS 中工作吗？

Question

我想在链接上使用悬停样式，但不在该链接的子级跨度上。我以前从未做过，但我试过这个

.properties #content table th a {
    color: #fff;
    text-decoration: none;
}

.properties #content table th a:hover {
    text-decoration: underline;
}

.properties #content table th a:hover span.sort-direction {
    text-decoration: none;
}

悬停下划线效果很好，但它仍然强调跨度。我想这是因为 anchor 元素的下划线会拉伸(stretch)以适应跨度，我想。

有什么解决方法？我也希望 span 成为一个链接。也许是 position: relative 在 anchor 上和 position: absolute 在 span 上的组合？

Answer 1

我把 anchor 节点放在自己的span中，然后在上面设置text-decoration: underline

.properties #content table th a:hover span.header {
    text-decoration: underline;
}