基于href属性改变链接颜色。

I'm working on Squarespace for a client that needs to add special blog post that are styled different. The problems is that this template doesn't allow it and the client can't code, so I'm trying to do it with custom CSS in a way that prevents errors.

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

All this "special" post have a link with href that contains the word "special", so I'm styling them with the css selector:

所有这些“特殊”的文章都有一个与href相关的链接，其中包含“特殊”一词，所以我用css选择器对它们进行样式化:

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

My question is if the client add more special post like "Special landscape", "Special Images", "Special theme" and so on, i can target them with:

我的问题是，如果客户增加更多的“特殊景观”、“特殊图像”、“特殊主题”等特殊贴子，我可以以:

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

Is there a way to style them differently based on the href without needing to know the first letter of the second word? Otherwise if the client put a different second word the style will not be applied.

有没有一种方法可以在不需要知道第二个单词的第一个字母的情况下根据href对它们进行不同的样式设置?否则，如果客户在第二个单词中输入了不同的单词，则不会应用样式。

I tried with nth-of-type() and so on but since each link are child of different blog's cards it doesn't work.

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

I hope explain myself :)

我希望能解释我自己:

3 个解决方案

#1

I think it is not possible the way you would have like it.

我认为这是不可能的。

If you want to have different stylings for these links, for example:

如果你想要这些链接有不同的样式，例如:

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

you need to know what is the second word of the link to give it a special styling. ATM in your case you can have different styling for normal links, links with "special" in the href-attribute and links with "special-" plus more words in the href-attribute.

您需要知道链接的第二个单词是什么，才能给它一个特殊的样式。在您的情况下，您可以为普通链接设置不同的样式，在href属性中与“special”链接，并在href属性中添加更多的单词。

If you do not know the second word, all you can do is to prepare stylings for as many cases you can think of.

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

Another way COULD be, that you give your customer a list of special string combinations which you prepare to have an own styling if he uses them in the 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

and in your CSS you have:

在你的CSS中有:

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

You can tell him to use these special strings if he wants to have his link in a special color. But this is 1. not really comfortable for him and 2. quite a strange look in the URLs.

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

Edit: and be sure not to use real words or strings that could be used in other links if you don't want them to be colored by mistake.

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

#2

you can use href attr to select it

您可以使用href attr来选择它

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

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

#3

Since you accepted the above answer, here is another way I think it could be better as am not sure appending color like that inside links is a good idea.

既然你接受了上面的答案，我认为还有另一种更好的方法，因为我不确定在里面添加那种颜色的链接是一个好主意。

You can rely on CSS variable and do something like this:

你可以依靠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>

Or you can directly apply inline-style:

也可以直接应用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>

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

#1