Question

我正在为Squarespace工作，需要添加风格不同的特殊博客帖子。问题是该模板不允许，客户端无法编码，因此我尝试使用自定义CSS来防止错误。

所有这些＆＃34;特别＆＃34; post有一个带有href的链接，其中包含单词＆＃34; special＆＃34;，所以我用css选择器为它们设置样式：

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

我的问题是，如果客户添加更多特殊帖子，例如＆＃34;特殊风景＆＃34;，＆＃34;特殊图片＆＃34;，＆＃34;特殊主题＆＃34;等等，我可以用：

来定位它们

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

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

我尝试使用nth-of-type（）等等，但由于每个链接都是不同博客卡片的子代，所以它不起作用。

我希望自己解释一下：）

Answer 1

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

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

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

你需要知道链接的第二个字是什么，以赋予它特殊的样式。在您的情况下，ATM可以为普通链接提供不同的样式，与＃34;特殊＆＃34;在href-attribute中并与＆＃34;特殊链接 - ＆＃34;加上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中看起来很奇怪。

编辑：如果您不希望错误地对其进行着色，请务必不要使用可能在其他链接中使用的真实字词或字符串。

Answer 2

您可以使用href attr来选择它

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

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

Answer 3

既然你接受了above answer，我认为这可能是更好的另一种方式，因为我不确定附加内部链接的颜色是个好主意。

您可以依赖CSS变量并执行以下操作：

＆＃13;

a[href*=special] {
  color: var(--c);
}

＆＃13;

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

＆＃13;

或者您可以直接应用内联样式：

＆＃13;

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

＆＃13;

或使用data-attribute：

＆＃13;

a[data-color="red"] {
 color:red;
}
a[data-color="blue"] {
 color:blue;
}
a[data-color="green"] {
 color:green;
}

＆＃13;

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

＆＃13;

根据href属性更改链接颜色

3 个答案: