css - 我可以使用 CSS :visited pseudo class on 'wildcard' links?

Question

假设我有一个包含多个链接的网站，如下所示:

www.example.com/product/1
www.example.com/product/2
www.example.com/product/3

我还会不时将跟踪信息附加到链接，以便我可以看到我的网站是如何被使用的，例如，如果有人从产品浏览器访问产品页面，我会设置一个 ref 参数:

www.example.com/product/1&ref=pb
www.example.com/product/2&ref=pb
www.example.com/product/3&ref=pb

问题在于，如果用户访问第一种类型的链接，然后查看第二种类型的链接，那么 :visited 伪类似乎不适用，因为浏览器似乎只匹配确切的 URL .从这个意义上说，有什么方法可以将“通配符”应用于链接，以便当用户看到第一种类型或第二种类型的链接时，它会突出显示吗？

注意:我无法更改此“ref”架构；它是继承的。

Answer 1

您可以使用 javascript 执行此操作。您可以按如下方式对链接进行编码

<a href="www.example.com/product/1" onclick="document.location.href='www.example.com/product/1&ref=ab';return false;">

对于启用了 javascript 的任何人，您将看到正在访问的 www.example.com/product/1&ref=ab，并且他们的浏览器会将所有带有 href=www.example.com/product/1 的链接检测为同一链接.并根据 :Visited 伪类适本地设置它们的样式。唯一的缺点是没有 Javascript 的人无法获得引用信息。这是否是一个可接受的折衷取决于您的要求。

你也可以这样做:

<a href="www.example.com/product/1" onclick="document.location.href=this.href + '&ref=ab';return false;">

因此您不必在其中对 url 进行两次编码。您甚至可以创建一个返回正确链接的函数，从一个地方获取 ref 值。