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

如果不在其他地方重要，或者在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?

覆盖伪元素

3 个答案: