如何使用JS定位<a>CSS类的</a>特定域html <a>链接？</a>

Question

I use online note taking editors to take notes. One of them I'm using is called dynalist.io.

I run stylebot (chrome plugin) to apply specific CSS sheets to those pages

Normally when i put a URL link inside of my documents, I put two types:

• Imgur.com links
• Any other domain links

I'd like to apply CSS styles on those <a href> tags seperately, however the program defaults the same class for all domain links so I cannot use CSS classes to achieve this

unless (to my knowledge) use javascript to target <a href> and make seperate classes for different domain links. Then apply CSS rules

Reference image:

How would I go about doing this?

edit: would I have to use greasemonkey to inject javascript?

Answer 1

You can add the following rules at your css file (this is not efficient):

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

It is like a regexp, and it is not efficient for a standard css, but in your case... will be good.

EDIT: The !important is just to make sure you will overwrite other css rules. The regexp is not efficient (for big pages) because the css need to check all the <a> tag and make a control.

If you need to change the color of other links, you need to create the same rule but with another link.

Answer 2

If I understood you correctly, you want to select all links who are from imgur and add a class to them.

You could do it like this:

Select all the a elements whose href attributes contains imgur .

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

Add the class 'sup' to them:

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