根据 href 属性更改 link 颜色

Question

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

所有这些 "special" post 都有一个 link 和包含单词 "special" 的 href，所以我用 css 选择器来设置它们的样式:

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

我的问题是，如果客户添加更多特殊的 post，如 "Special landscape"、"Special Images"、"Special theme" 等，我可以将它们定位为：

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

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

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

我希望自己解释一下:)

Answer 1

我认为这不可能是您想要的方式。

如果您想为这些 link 设置不同的样式，例如：

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

您需要知道 link 的第二个词是什么才能赋予它特殊的样式。在您的情况下，ATM 可以为正常 links、links 在 href-attribute 中使用 "special" 和 links 在 "special-" 中使用不同的样式在 href-attribute.

中添加更多单词

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

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

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

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

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

Answer 2

既然你接受了，我认为这是另一种更好的方法，因为我不确定在链接中附加颜色是个好主意。

您可以依赖 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>

或使用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>

Answer 3

你可以使用 href 属性来 select 它

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

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

根据 href 属性更改 link 颜色

Change link color based on href attribute

css

attributes

css-selectors

selector

permalinks