Link стайлинг только конкретные ссылки в списке

Question

У меня есть список CSS стиль, который выглядит следующим образом:

.my-list { 
    text-align: center; 
    list-style: none; 
    a { color: #000000; } 
} 

Я хотел бы, чтобы стиль цвета определенных ссылок внутри этого списка с другим цветом. Как я могу это сделать?

<li class=my-list> 

    <a href="www.blah.com">this link is black</a> 

    <a href="www.blahblah.com">I WANT THIS LINK TO BE ANOTHER COLOR</a> 

</li> 

Я бы выбрал решение для этой проблемы, которое не требует ручного изменения цвета ссылки. У меня много таких списков, и ручное решение не представляется возможным.

Answer 1

Используйте селектор nth-child CSS3, чтобы выбрать <a> элемент по его индексу в <li>:

.my-list a:nth-child(2) { 
    color: red; 
} 

Пример: http://jsfiddle.net/6hCWY/

Answer 2

Вы хотите добавить a после mylist, чтобы указать, что вы хотите применить этот CSS к a теги , Вы можете использовать pseudo selectors, first-child, nth-child для выбора конкретных тегов в списке:

.my-list a { 
    background-color : #000000; 
} 

Использование селектора first-child псевдо.

.my-list a:first-child { 
    background-color: red; 
} 

Чтобы выбрать 2-ую ссылку в списке

Используйте nth-child selector:

.my-list a:nth-child(2) { 
    background-color: red; 
} 

http://jsfiddle.net/6JSSJ/

Answer 3

Использование:

.my-list { 
    //some styles here 
} 
.my-list a { 
    //some styles for links here 
} 

Вы не можете вложить CSS в блоки, это не похоже на язык программирования. Единственный случай, когда вы вставляете блок в другой, предназначен для определения запросов к мультимедиа.

Answer 4

Добавьте класс ссылки, которые вы хотите другой цвет:

.my-list { 
    text-align: center; 
    list-style: none; 
} 

.my-list a.diffcolor { 
    color:red 

} 

Тогда вы можете просто отметить те, которые вы хотите иметь этот цвет с классом.

<li class=my-list> 

    <a href="www.blah.com">this link is black</a> 

    <a href="www.blahblah.com" class="diffcolor">I WANT THIS LINK TO BE ANOTHER COLOR</a> 

</li> 

Answer 5

Вы можете добавить Addtional класс CSS или использовать селектор атрибута http://css-tricks.com/attribute-selectors/