根据href属性更改链接颜色 [英] Change link color based on href attribute

问题描述

我正在为需要添加特殊样式的特殊博客文章的客户开发Squarespace. 问题在于该模板不允许这样做，客户端也无法编写代码，因此我正在尝试使用自定义CSS来防止错误.

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.

所有这些特殊"帖子都有一个带有href的链接，其中包含单词特殊"，因此我将使用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*="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 }.

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

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.

我尝试使用nth-of-type()等等，但是由于每个链接都是不同博客卡片的子元素，因此无法正常工作.

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

我希望自己解释一下:)

I hope explain myself :)

推荐答案

我认为这是不可能的.

如果您希望这些链接具有不同的样式，例如:

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

您需要知道链接的第二个单词是什么才能为其赋予特殊的样式. 对于您的ATM，您可以为普通链接设置不同的样式，在href-attribute中带有"special"的链接以及在"href-attribute"中带有"special-"的链接以及更多单词.

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.

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

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

在CSS中，您拥有:

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

如果他想以特殊颜色显示链接，则可以告诉他使用这些特殊字符串.但这对他来说不是很舒服，而且2. URL中的外观很奇怪.

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.

如果您不希望它们被错误地涂上颜色，请确保不要使用其他链接中可能使用的真实单词或字符串.

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.

这篇关于根据href属性更改链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！