Различные цвета для ссылки

Question

У меня есть это:

DIV#tt { 
    background: #fff; 
    color: #333; 
    margin: 0 0 15px; 
    position: relative; 
    padding: 1px; 
} 
DIV#tt A, 
DIV#tt SPAN.link { 
    color: #990000; 
} 

Это прекрасно работает и меняет цвет моих ссылок.

<div class="someotherclass"><span>My Link </span></a></div> 

Теперь моя проблема в том, что есть необходимость, когда иногда мне нужен зеленый цвет. Как я могу сделать это исключение в приведенном выше CSS, а затем вызвать его в HTML?

Answer 1

Селектор div#tt a указывает, что все ссылки (<a>) внутри <div> с идентификатором tt должны быть оформлены определенным образом - в этом случае цвет быть установлен. Итак:

<div id="tt"> 
    <a href="#">Link 1</a> 
</div> 
<div id="abc"> 
    <a href="#">Link2</a> 
</div> 

В этом примере Ссылка 1 будет в стиле в соответствии с div#tt a, но Ссылка 2 не будет.

Теперь, если у вас была ссылка 2 внутри ЦГ DIV, что-то вроде так

<div id="tt"> 
    <a href="#">Link 1</a> 
    <div id="abc"> 
     <a href="#">Link 2</a> 
    </div> 
</div> 

Ссылка 2 бы быть стилизовано же, как ссылка 1, как указано в CSS для div#tt a. Если вам нужен другой стиль в Link 2, вам нужно применить селектор, например div#tt div#abc a.

Для примера см. this JSFiddle.

EDIT

Если вы хотите две ссылки на одной и той же линии, но стиль по-разному, вы можете либо окружать второе звено с <span> вместо <div>, который не будет принуждать разрыв строки, или вы можете добавить идентификатор ко второй ссылке.

Использование в <span>, это HTML:

<div id="tt"> 
    <a href="#">Link 1</a> 
    <span id="abc"><a href="#">Link 2</a></span> 
</div> 

Тогда вы стилизации вторую ссылку, используя div#tt span#abc a.

В качестве альтернативы вы можете добавить идентификатор ко второй ссылке и использовать ее для стилизации. HTML:

<div id="tt"> 
    <a href="#">Link 1</a> 
    <a href="#" id="two">Link 2</a> 
</div> 

Тогда вы бы стиль ссылки в целом, как div#tt a и второе звено, используя div#tt a#two.

Я обновил the JSFiddle example, чтобы показать выше.

EDIT 2

За комментарием ниже Ф. Мюллер, whic является абсолютно правильным. Я использую id в примерах выше, но это, вероятно, более эффективная практика (особенно если вы хотите создать несколько ссылок в «вторичном» стиле), чтобы вместо этого использовать другие виды селекторов.

Например, если вы хотите Ссылка 1 и Ссылка 2 быть оформлены в одну сторону, и Link 3 и Link 4, чтобы быть стилизовано другой, это было бы хорошо HTML:

<div id="myDiv" class="something"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#" class="secondary">Link 3</a> 
    <a href="#" class="secondary">Link 4</a> 
</div> 

Моделирование будет:

div.something a { 
    /* styling for primary links */ 
} 
div.something a.secondary { 
    /* styling for secondary links */ 
} 

Здесь, если вы хотите добавить вторичный стиль, чтобы больше ссылок, вы бы просто нужно добавить имя класса по ссылке. (То есть, если вы хотите добавить новую ссылку 5, вы бы просто нужно добавить class="secondary" к <a> и было бы стилизовать соответствующим образом.)

И the JSFiddle updated again показать эти изменения.

Answer 2

Используйте свой класс:

#tt.someotherclass a, #tt.someotherclass span.link { 
    color: green; 
}