尝试使用 Font-Awesome 图标定位每个事件链接。我正在尝试使用“Content:before”和“a::first-child”的组合。
用图标定位第三个 a 链接“联系我们”,无效。尝试了很多组合。这可能吗? xD
.children.windowbg > a::first-child before{
content: "\f114";
font-family: fontawesome !important;
padding-right:5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#">Contact Us</a>, <a href="#">Privacy policy</a>
</td>
?
最佳答案
.windowbg a:nth-of-type(1):before{
content: "\f114";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
.windowbg a:nth-of-type(2):before{
content: "\f115";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
.windowbg a
{
margin-left:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#">Contact Us</a>, <a href="#">Privacy policy</a>
</div>
这里提到的一些解决方案并不是纯粹的 CSS 解决方案,因为它们要求您更改 DOM 结构。
你没有正确使用选择器,在 before :P 之前没有 :
并且 a
不是第一个 child 。使用 nth-of-为此输入
选择器。
此外,如果没有 table
,你不能使用 td
标签。我的演示是在用 div 替换 td 之后。
像这样,
.windowbg a:nth-of-type(1):before{
content: "\f114";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
fiddle 链接:https://jsfiddle.net/rr78gfw1/1/
关于html - 尝试使用独特的超赞字体图标定位每个链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36534069/