Как изменить цвет внешних ссылок внутри класса

Question

возможно ли изменение цвета внешних ссылок внутри какого-либо класса? Я попробовал это:

.space-page-content a {
    background: green;
    color: white;
}
.space-page-content a[href^="http://"]:not([href*="mywebsite.com"]):after,
.space-page-content a[href^="https://"]:not([href*="mywebsite.com"]):after{
   background: blue;
    color: white;
}

<a style="space-page-content" href="http://www.mywebsite.com/page-1/" >internal</a><br>
<a style="space-page-content" href="http://www.google.com" >external</a><br>
<a style="space-page-content" href="http://www.mywebsite.com" >internal</a>

Answer 1

У вас есть ошибки в вашем CSS и HTML коде,

1. в CSS .space-page-content, определенном как класс, в то время как в вашем HTML это что-то еще.
2. также когда вы пишете, как это .space-page-content a, это означает, что a - это ребенок внутри вашего родителя .space-page-content. Но на самом деле ваш HTML говорит, что этот класс задан для a, поэтому вы должны сказать выбрать 'a', который имеет класс 'space-page-content' , таким образом a.space-page-content без любые пробелы между a и вашим классом.
3. вы хотите изменить фон вашего a, поэтому нет необходимости добавлять :after.

a.space-page-content{
    background: green;
    color: white;
}
a.space-page-content[href^="http://"]:not([href*="mywebsite.com"]),
a.space-page-content[href^="https://"]:not([href*="mywebsite.com"]){
   background: blue;
    color: white;
}

<a class="space-page-content" href="http://www.mywebsite.com/page-1/" >internal</a><br>
<a class="space-page-content" href="http://www.google.com" >external</a><br>
<a class="space-page-content" href="http://www.mywebsite.com" >internal</a>