Question

我有一个覆盖CSS，在样式标记中如下，

＆＃13;

#MainContent * {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
    font-size: small !important;
}

＆＃13;

<div id="MainContent">
    <div id="head">
        <h3>Some Title</h3>
    </div>

    <div id="abc" class="def">
        <strong>Social:</strong>
        <a title="LinkedIn" href="https://www.linkedin.com/">
          <i class="fa fa-linkedin">
          <span class="sr-only">LinkedIn Page</span>
          </i>
        </a>

        <a title="Twitter" href="https://twitter.com/">
          <i class="fa fa-twitter">
          <span class="sr-only">Twitter Page</span>
          </i>
        </a>
    </div>
</div>

＆＃13;

但是这个fa fa-icons并没有显示出来。我已经进行了this讨论，该讨论表明它不适用于

class * { CSS }

有没有办法解决它？

Answer 1

您还可以在当前定义中设置排除CSS选择器(:not)。它还会排除Font Awesome将font-size: small分配给#MainContent中的元素。

例如：

/**
 * Set to all elements in #MainContent 
 * @except: .fa (FontAwesome)
 */
 #MainContent *:not(.fa) {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
    font-size: small !important;
}

Answer 2

尝试重新定义

i.fa {
    font-family: FontAwesome!important;
}

这应该在您的* {}定义之后。

说明：

你强制将字体Lucida分配给所有元素，但字体很棒，需要font-family: FontAwesome。

如果它们具有相同的重要性，也可以覆盖另一个相同的样式。

Answer 3

您可以使用此选项覆盖常规设置：

#MainContent * {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
  font-size: small !important;
    }
#MainContent * .fa {
  font-family: FontAwesome !important;
}

但是，在您的特定情况下，这也不会真正起作用：您有一些文本（“Twitter页面”，“LinkedIn页面”），其中内部标签具有类{{1这些单词将与FontAwesome一起显示！

所以你必须添加这样的第三个规则来为这些跨度重新覆盖fa字体设置：

fa

fa fa-icons不能与#tag_selector * {_CSS_}一起使用

3 个答案: