Question

目前识别当前链接的最常用方法是向锚或其父级添加一个类：

<li class="active"><a href="/">Home</a></li>

这种技术有几个缺点：

我尝试了以下但没有成功：

添加并设置了设置当前链接的nav，但我们需要为每个链接添加id，CSS将变得冗长

<style>
[data-active^="home"] a[id^="home"]{ color:red; }
</style>
<nav data-active="home-link"><ul>
    <li><a id="home-link">Home</a>
    ...

~~是否有不同的方法来选择语义正确的当前链接？~~

使用CSS选择当前或活动链接的目的是为用户提供有关当前正在查看的部分或文档的线索。正如@BoltClock指出active类在语义上没有意义，问题是是否有语义上有意义的方式来选择属于该部分的链接或记录用户是否正在访问？

Answer 1

我找了类似:target伪类的东西，所以选择器可能是：a:current，遗憾的是它还不存在。

事实上，还没有这样的选择器，所以你拥有的已经是最好的选择了。以下伪类声音就像它们可能正是您所寻找的那样，但它们意味着不同的东西：

:active匹配光标指定的元素;通常这意味着要点击的元素。
:target匹配ID与URL哈希片段匹配的元素，这意味着它只适用于哈希片段，而不适用于URL路径本身。
:current appears in Selectors 4，但它意味着完全不同的东西：它与按时间顺序排列的当前元素相匹配。由于HTML本身没有时间轴的概念，:current将不会匹配（尽管我可以想象字幕或AT工具在HTML文档中充分利用它）。

也就是说，实际上是在选择器4中提出的一个伪类，它以当前文档为目标，只有它被称为:local-link：

a:local-link { color: red; }

当然，实际上还没有实现，所以在可预见的未来，你仍然坚持使用类名。

正如helion3所指出的那样，使用类名的原因是因为它们是目前存在的最简单的解决方案，并且经过了尝试，测试和真正的传统可追溯到 years 。请记住，即使HTML没有URL片段之外的“当前文档”语义，因此您实际上无法继续使用具有硬编码值的类名或自定义数据属性。

我不同意你链接到的那篇文章，但鉴于那里实际上并不是一种“语义正确”的方法，因为没有适当的伪类存在语义，再次你基本上坚持这个。如果它让你感觉更好，请注意在这种情况下类名在语义上并不正确，而是在语义上无意义，即它们对它们所处的上下文的含义没有任何影响，或整个文件。

Answer 2

当前是CSS没有的概念，因为CSS不涉及路由处理。我们使用active / current / at类名，因为这是最简单的方法。

Javascript可以根据路由轻松设置/删除类，服务器端语言也可以。

此外，导航结构不同，在您的示例中，它不是活动的锚，而是li。这应该留给开发人员根据样式的需要建立。