根据href属性更改链接颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据href属性更改链接颜色相关的知识，希望对你有一定的参考价值。
我正在为一个需要添加不同风格的特殊博客帖子的客户端开发Squarespace。问题是这个模板不允许它，客户端无法编码，所以我试图用自定义CSS来防止错误。
所有这个“特殊”帖子都有一个带有href的链接，其中包含单词“special”，所以我用css选择器为它们设置样式：
[href*="Special"] { style }.
我的问题是，如果客户添加更多特殊帖子，如“特殊风景”，“特殊图像”，“特殊主题”等，我可以用以下方式定位：
[href*="Special+l"] { style }.
[href*="Special+I"] { style1 }.
[href*="Special+t"] { style2 }.
有没有办法根据href对它们进行不同的设置，而不需要知道第二个单词的第一个字母？否则，如果客户端使用不同的第二个单词，则不会应用该样式。
我尝试使用nth-of-type（）等等，但由于每个链接都是不同博客卡的子项，因此无效。
我希望自己解释一下:)
我认为你不喜欢它的方式。
如果您希望为这些链接设置不同的样式，例如：
<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.在网址中看起来很奇怪。
编辑：如果您不希望它们被错误地着色，请确保不要使用可能在其他链接中使用的真实单词或字符串。
你可以使用href attr来选择它
a[href*="http://abc.go.com"] {
color: #db4344;
}<a href="http://abc.go.com/">link 1</a>既然你接受了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>以上是关于根据href属性更改链接颜色的主要内容，如果未能解决你的问题，请参考以下文章
如何获得触发器以根据 DataContext 属性更改 TextBlock 的颜色？