Переопределение псевдоэлемента

Question

У меня есть список, который начинается с значка FontAwesome, а затем текст, который я пытаюсь создать индивидуально (размер и цвет). Например, я хочу значок Skype, чтобы быть # 00abeb в цвете

Это HTML код:

<ul class="contact-entries"> 
<li class="icon-mobile-phone">Mobile</li> 
<li class="icon-phone">Landline</li> 
<li class="icon-skype contact-skype"><a href="skype:misc?chat">misc</a></li> 
<li class="icon-envelope-alt"><a href="mailto:contact@misc.org" title="Email">contact@misc.org</a></li> 
<li class="icon-map-marker">Address</li> 
</ul> 

Основной CSS стиль это:

.contact-entries > li { position:relative; } 
.contact-entries > li:before { position:absolute; left:0; top:0; color: white; font-size:20px; } 

И я создал это себя изменить размер и цвет значка Skype, но он не будет работать:

.contact-skype { 
    color: #00abeb !important; 
    font-family: Helvetica,Arial,sans-serif; 
    font-size: 18px !important; 
} 

Любые идеи?

Answer 1

.contact-entries .icon-skype.contact-skype { 
    color: #00abeb; 
    font-family: Helvetica,Arial,sans-serif; 
    font-size: 18px; 
} 

Должен сделать это, если нет! Важно в другом месте или более тяжелый селектор на ли.

Answer 2

Если вы намерены изменить цвет фона. Вы должны сделать ..

background-color: #00abeb !important; 

вместо:

color: #00abeb !important; 

Answer 3

Если вы хотите установить цвет ссылки, вы можете просто установить цвет или ваш «A» элементы к «» наследовать чтобы ссылка наследовала цвет от li. Вот скрипка для этого:

http://jsfiddle.net/hVurc/

.contact-skype { 
    color: #00abeb; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 18px; 
} 
a{ 
    color:inherit; 
} 

Или вы можете использовать селектор ребенка комбинатора так:

.contact-skype > a{ 
    color: #00abeb; 
} 

Если вы хотите иметь, что цвет фона, просто установите background-color до # 00abeb. Вот скрипка для этого, а также:

http://jsfiddle.net/RwTHP/1/

.contact-skype { 
    background-color: #00abeb; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 18px; 
} 

Edit: Вот ссылка, которая может быть полезной.

• Why can't I override existing pseudo-elements?