这能在CSS中工作吗？

我希望在链接上有悬停样式，但不希望在作为该链接子对象的跨距上有悬停样式。我以前从未做过，但我试过这个

.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;
}

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

---

解决办法是什么？我希望跨度也是一个链接。可能是锚点上的

位置：相对

和span上的

位置：绝对

的组合？

我将锚点节点放在其自己的span中，然后在其上设置

文本装饰：下划线

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

---

由于您没有提供任何HTML，我做了一个简化的示例：

CSS

HTML

---

这是一个有趣的怪癖。由于

a

元素的宽度包括

span

，因此下划线贯穿整个

a

链接。下划线值

none

不会“清空”该下划线。您可以通过这种方式获得想要的效果（假设您的背景为白色）：

---

如果你有一个非固体背景，这可能看起来并不理想。您最好添加一个额外的

span

元素。

由于有效的HTML不能有两个ID相同的元素，您可以通过删除

.properties

使选择器更高效。在所有情况下，只需提示一下：）CSS看起来不错。你能指出一个测试页面吗？我使用属性作为我的主体元素的一个类来定位不同的页面。@尼克：事实上，当同一个CSS在多个页面上使用时，你很可能只想选择

#内容
，当它在
.properties
@disgludedgoat内时-虽然正确，在这种情况下，最好使用更具选择性的ID，因为浏览器使用ID的效率要高得多。我想这只是口味的问题，但是长选择器很少能让我的生活更轻松。哦，天哪，我看到你回答了你自己的问题。。。我想我应该注意一下对不起，我认为HTML是不言自明的。我承认，看到它总是有帮助的，不必做出假设。哈哈，我承认，我以为你只是在问题中添加了更多的CSS，而没有提供答案，所以我没有马上看。
.properties a {
 color: #fff;
 text-decoration: none;
}

.properties a:hover span.hovered {
 text-decoration: underline;
}

<div class="properties">
 <a href="#"><span class="hovered">Hello</span> Test</a>
</div>

.properties #content table th a:hover {
    border-bottom: 1px solid black;
}

.properties #content table th a:hover span.sort-direction {
    border-bottom: 1px solid white;
}