覆盖伪元素

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;
}

如果在其他地方没有 !important 或者 li 上没有更重的选择器，应该这样做。

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;
}

如果您希望它具有该背景颜色，只需将背景颜色设置为#00abeb。这也是一个小提琴：

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

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

编辑： 这是一个可能有用的链接。

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