изменить стиль одного элемента без изменения другого?

Question

извините, вопрос не имеет смысла, но я объясню. У меня есть две гиперссылки

<a href="" class="menu-link">home</a>
<a href="" class="menu-link">blog</a>

я хочу применить этот стиль

<style>
.menu-link{color:#000;}
</style>

, но применимо только к <a href="" class="menu-link">home</a>, как это можно сделать, кроме фактического изменения класса, как показано ниже

<a href="" class="menu-link-1">home</a>
<a href="" class="menu-link-2">blog</a>

Answer 1

Если вы не можете изменить разметку для добавления дополнительного класса, вы можете выбрать элемент по его атрибуту href, предполагая, что он имеет один:

a.menu-link[href='home.html'] {
  color: #000;
}

Вотживой пример.

Answer 2

Вы можете назначить несколько классов одному элементу.

<a href="" class="menu-link home">home</a>
<a href="" class="menu-link">blog</a>

все, что вам нужно, это добавить пробел

<style>
.menu-link.home{color:#000;}
</style>

Answer 3

Может быть, это решение подойдет вам.

<a href="" class="menu-link black">home</a>
<a href="" class="menu-link">blog</a>

<style>
.menu-link{}
.black {color:#000;}
</style>

Answer 4

Если вы не можете / не хотите изменить фактическую разметку, попробуйте это (jQuery)

jQuery(function($) {
    var home = $("a.menu-link:contains('home')");

    // change style
    home.css("color", "#000");

    // add class
    home.addClass("other-class");

    // remove class
    home.removeClass("menu-link");

    // add / change attributes
    home.attr("id", "some-id");        
});

Answer 5

Я думаю, что ссылка 'home' является первой в этой последовательности, так почему бы не использовать

.menu-link { color: <your_default_color>; }
.menu-link:first-child { color: #000; }

Answer 6

Вы можете добавить другой класс к menu-link-1 с нужным вам стилем:

<style>a.home { color: #000; }</style>
<a href="" class="menu-link-1 home">home</a>
<a href="" class="menu-link-2">blog</a>

edit : очевидно, если бы я прочитал вопрос, я бы заметил, что автор не хотел менять классы ..

Answer 7

Alt 1

Вы можете добавить атрибут style к этой привязке:

<a href="" class="menu-link" style="color:#000;">home</a>

Alt 2

Или вы можете добавить id к этомуякорь:

<a href="" class="menu-link" id="specialstyle">home</a>

и замените .menu-link на #specialstyle в вашем CSS.

Alt 3

Или вы можете дать этому якору дополнительный class:

<a href="" class="menu-link menu-link-special">home</a>

и замените .menu-link на .menu-link-special в вашем CSS.