根据href属性更改链接颜色

Question

我正在为一个需要添加不同风格的特殊博客帖子的客户端开发Squarespace。问题是这个模板不允许它，客户端无法编码，所以我试图用自定义CSS来防止错误。

所有这个“特殊”帖子都有一个带有href的链接，其中包含单词“special”，所以我用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

你需要知道链接的第二个字是什么，给它一个特殊的样式。在您的情况下，您可以使用不同的正常链接样式，href-attribute中的“特殊”链接和“特殊”链接以及href-attribute中的更多单词。

如果您不知道第二个单词，您所能做的就是为您能想到的尽可能多的案例准备样式。

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

<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.在网址中看起来很奇怪。

---

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

Answer 2

你可以使用href attr来选择它

a[href*="http://abc.go.com"] {
  color: #db4344;
}

<a href="http://abc.go.com/">link 1</a>

Answer 3

既然你接受了above answer，这是另一种方式，我认为它可能会更好，因为我不确定附加颜色，如内部链接是一个好主意。

您可以依赖CSS变量并执行以下操作：

a[href*=special] {
  color: var(--c);
}

<a href="special-1" style="--c:red">link 1</a>
<a href="special-something" style="--c:blue">link 2</a>  
<a href="special-something-else" style="--c:green">link 2</a>

或者您可以直接应用内联样式：

<a href="special-1" style="color:red">link 1</a>
<a href="special-something" style="color:blue">link 2</a>  
<a href="special-something-else" style="color:green">link 2</a>

或者使用data-attribute：

a[data-color="red"] {
 color:red;
}
a[data-color="blue"] {
 color:blue;
}
a[data-color="green"] {
 color:green;
}

<a href="special-1" data-color="red">link 1</a>
<a href="special-something" data-color="blue">link 2</a>  
<a href="special-something-else" data-color="green">link 2</a>