根据 href 属性更改链接颜色答案

【问题标题】：Change link color based on href attribute根据 href 属性更改链接颜色
【发布时间】：2018-03-02 11:15:25
【问题描述】：

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

所有这些“特殊”帖子都有一个带有 href 的链接，其中包含“特殊”这个词，所以我使用 css 选择器来设置它们的样式：

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

我的问题是，如果客户添加更多特殊的帖子，如“特殊景观”、“特殊图像”、“特殊主题”等，我可以将它们定位为：

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

有没有办法根据 href 设置不同的样式而不需要知道第二个单词的第一个字母？否则，如果客户端输入不同的第二个单词，则不会应用该样式。

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

我希望自己解释一下:)

【问题讨论】：

博客卡多吗，你能定位到它们的链接吗？
目前，任何包含“特殊”一词的href 都应该得到不是您想要的样式？ [href*="Special"] { style } 这匹配任何包含“特殊”的内容，即href
博客卡片有很多，每一张卡片里面都有href的链接。每个 href 对应于管理面板设置的类别。我的观点是，每个“特殊”类别都以“特殊”一词开头，然后是客户选择的另一个我无法控制的词，所以如果我使用[href*="Special"] { style } 或[href*="Special+"] { style }，我仍然会为所有这些词设置样式。我想给它们设置不同的样式。
你会用javascript吗？我不认为 CSS 可以做到这一点。
你能指定不同的吗？

标签： css attributes css-selectors selector permalinks

【解决方案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 中带有“特殊-”的链接以及更多单词。

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

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

<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 看起来很奇怪。

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

【讨论】：

如果你想让链接看起来不同（只要 href 属性中的第二个单词不同）你应该使用 javascript
第二种方法很聪明 + 1
谢谢 Nils，我希望我不知道怎么做。我想准备很多案件，但我知道这绝对不是最好的做法。可能会回去和他讨论更好的解决方案。
我可能会使用 data 属性作为颜色...不确定在这样的链接中包含颜色是个好主意
@TemaniAfif 是的，我知道这不是最佳实践，但我认为这对客户（对 HTML 一无所知）来说可能更容易。你不觉得吗？

【解决方案2】：

您可以使用href attr 来选择它

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

&lt;a href="http://abc.go.com/"&gt;link 1&lt;/a&gt;

【讨论】：

【解决方案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>

或者你可以直接应用inline-style：

<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>

或者使用数据属性：

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>

【讨论】：