总结 css 类 行不通
Summarizing css classes don't work
我使用不同的 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代码吗?
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
元素设置一个class,然后简单地做这个。
ul.fontAwesomeRule > li:bfore{
font-family: FontAwesome;
display: block;
float: left;
width: 1.5em;
}
因此,继续将此 class fontAwesomeRule
添加到您要定位的所有 ul
元素。
我使用不同的 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代码吗?
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
元素设置一个class,然后简单地做这个。
ul.fontAwesomeRule > li:bfore{
font-family: FontAwesome;
display: block;
float: left;
width: 1.5em;
}
因此,继续将此 class fontAwesomeRule
添加到您要定位的所有 ul
元素。