如何使用JS来针对特定领域的html <a>链接和CSS类？

Question

我使用在线笔记的编辑来做笔记。我正在使用的其中一个名为dynalist.io。

我运行stylebot (chrome插件)将特定的CSS工作表应用于这些页面。

通常，当我在文档中放置URL链接时，我会放置两种类型：

• Imgur.com链接
• 任何其他域链接

我希望将CSS样式分别应用于这些<a href>标记，但是程序为所有域链接默认相同的类，所以我不能使用CSS类来实现这一点。

除非(据我所知)使用javascript来针对<a href>并为不同的域链接创建单独的类。然后应用CSS规则

参考图像：

​

​

我该怎么做呢？

编辑:我必须使用greasemonkey注入javascript吗？

Answer 1

您可以在css文件中添加以下规则(这是无效的)：

a[href^="http://i.imgur.com"] {
    color: red !important;
}

它就像一个regexp，对于一个标准的css来说并不有效，但是在你的例子中.会很好的。

编辑：!important只是为了确保您将覆盖其他css规则。regexp效率不高(对于大页面)，因为css需要检查所有的<a>标记并创建一个控件。

如果您需要更改其他链接的颜色，则需要使用另一个链接创建相同的规则。

Answer 2

如果我正确地理解了你，你想要选择所有的链接，谁是来自于，并添加了一个类到他们。

你可以这样做：

选择所有，这是一个元素，其href属性包含imgur。

var elements = document.querySelectorAll('a[href*="imgur"]');

将类“sup”添加到它们中：

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].classList.add('sup');
}