css - 总结 css 类不起作用

Question

我使用不同的 Font Awesome 图标，我试图总结这几行:

CSS

ul.long_arrow_right,ul.minus,ul.long_arrow_circle_right   {list-style: none;}
ul.long_arrow_right         > li:before {content:"\f178"; font-family: FontAwesome;display: block;float: left;width: 1.5em;}
ul.minus                    > li:before {content:"\f068"; font-family: FontAwesome;display: block;float: left;width: 1.5em;}
ul.long_arrow_circle_right  > li:before {content:"\f0a9"; font-family: FontAwesome;display: block;float: left;width: 1.5em;}

要使用 Font Awesome，您需要将它包含到 html 头部。

html 标题

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

css 代码，不能正常工作

ul.long_arrow_right         > li:before {content:"\f178";}
ul.minus                    > li:before {content:"\f068";}
ul.long_arrow_circle_right  > li:before {content:"\f0a9";}
ul.long_arrow_right,ul.minus,ul.long_arrow_circle_right   {list-style: none;}
ul.long_arrow_right,ul.minus,ul.long_arrow_circle_right > li:before {font-family: FontAwesome;display: block;float: left;width: 1.5em;}

这个css代码不是可以总结一下吗？

Answer 1

css-code, which doesn't work correct

解释这个规则

ul.long_arrow_right,ul.minus,ul.long_arrow_circle_right > li:before {}

它选择这些元素

<ul class='long_arrow_right'></ul>
<ul class='minus'></ul>
<ul class='long_arrow_circle_right'><li></li></ul>  //the li is selected

因此它针对 ul.long_arrow_circle_right 下的 2 个 ul 元素和 li's。您需要更改选择器。

你想要的是

 ul.long_arrow_right > li:before ,ul.minus > li:before ,ul.long_arrow_circle_right > li:before {
  font-family: FontAwesome;
  display: block;
  float: left;
  width: 1.5em;
}

---

---

或者您可以为所有需要此规则的 ul 元素设置一个类，然后只需执行此操作即可。

 ul.fontAwesomeRule > li:bfore{
    font-family: FontAwesome;
    display: block;
    float: left;
    width: 1.5em;
 }

因此，继续将此类 fontAwesomeRule 添加到您要定位的所有 ul 元素。