css - 根据 href 属性更改链接颜色

Question

我正在为需要添加样式不同的特殊博客文章的客户开发 Squarespace。问题是这个模板不允许它并且客户端不能编码，所以我试图以一种防止错误的方式使用自定义 CSS 来完成它。

所有这些“特殊”帖子都有一个包含“特殊”一词的 href 链接，因此我使用 css 选择器对它们进行样式设置:

[href*="Special"] { style }.

我的问题是，如果客户添加更多特殊帖子，如“特殊风景”、“特殊图片”、“特殊主题”等，我可以针对他们:

[href*="Special+l"] { style }. 
[href*="Special+I"] { style1 }.
[href*="Special+t"] { style2 }.

有没有一种方法可以根据 href 为它们设置不同的样式，而无需知道第二个单词的第一个字母？否则，如果客户输入不同的第二个词，则不会应用该样式。

我尝试使用 nth-of-type() 等等，但由于每个链接都是不同博客卡片的子链接，所以它不起作用。

我希望自己解释一下:)

Answer 1

我认为这是不可能的。

如果你想为这些链接设置不同的样式，例如:

<a href="special-boat"></a>   // in blue
<a href="special-car"></a>    // in red
<a href="special-house"></a>  // in green

您需要知道链接的第二个词是什么，才能赋予它特殊的样式。在您的情况下，ATM 可以为普通链接设置不同的样式，在 href-attribute 中带有“特殊”的链接并在 href-attribute 中带有“special-”以及更多单词的链接.

如果你不知道第二个词，你所能做的就是为你能想到的尽可能多的情况准备样式。

另一种方法是，您为客户提供一个特殊字符串组合列表，如果他在链接中使用它们，您准备拥有自己的样式。

<a href="you-dont-know-the-link-c0000FF"></a>   // in blue
<a href="you-dont-know-the-link-c00FF00"></a>   // in green
<a href="you-dont-know-the-link-cFF0000"></a>   // in red

在你的 CSS 中你有:

a[href*=c0000FF] {
  color: blue;
}
a[href*=c00FF00] {
  color: green;
}    a[href*=cFF0000] {
  color: red;
}

如果他想让他的链接有一种特殊的颜色，你可以告诉他使用这些特殊的字符串。但这 1. 对他来说不是很舒服 2. URL 看起来很奇怪。

---

编辑:如果您不希望它们被错误地着色，请确保不要使用可以在其他链接中使用的真实单词或字符串。