尝试使用独特的超棒字体图标定位每个 link
Trying to target each a link with a unique font-awesome icon
尝试使用 Font-Awesome 图标定位每个活动 link。我正在尝试使用组合 os "Content:before" 和 "a::first-child".
用图标定位第三个 a-link "contact us",无效。尝试了很多组合。这甚至是 possible 吗? 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>
?
你给你的 link 一个 CLASS 并给他一个 font-family
.yourlink{
font-family: fantasy;
}
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#" class="yourlink">Contact Us</a>, <a href="#">Privacy policy</a>
</td>
为了向您的链接添加超棒的字体图标,只需在您的锚标记内使用 <i>
标记作为 <i class="fa fa-tags"></i>
。
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations<i class="fa fa-tags"></i></a>, <a href="#">Disclaimer<i class="fa fa-exclamation"></i></a>, <a href="#">Contact Us<i class="fa fa-phone"></i></a>, <a href="#">Privacy policy<i class="fa fa-info"></i></a>
</td>
参考 here 进行演示
.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.Use nth-of-type
选择器。
此外,如果没有 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 link: https://jsfiddle.net/rr78gfw1/1/
其他答案有更好的解决方案。这只是解释代码片段中的错误
- Pseudo-classes 和
:first-child
一样只有一个冒号,而不是两个。
:first-child
selects(在本例中)一个 a
标签,它是 .children.windowbg
的第一个 child。您尝试 select 的 a
标签不是第一个 child,而是第一个类型。因此,您应该使用 :first-of-type
.
- 到select一个pseudo-element,使用冒号(
:before
)。现在您 select 在 a
标签中添加了 before
标签。
- 没有
table
的 td
标签是无效的,标签在代码片段中被删除,所以为了测试,我把它包裹在 table
和一个 tr
标签。
.children.windowbg > a:first-of-type: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" />
<table>
<tr>
<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>
</tr>
</table>
其他答案更可取,因为当您更改链接的顺序或添加一个时,您需要更改 CSS(并且因为 CSS 不适用于 non-dynamic造型)。更好的解决方案是在 HTML.
中添加图标
更新
有:first-of-type
到select类的第一个元素,一般在某个parent。要 select 最后一个 child,请使用 :last-of-type
。要select其他children,使用:nth-of-type(n)
,其中n
是元素的索引。第一个元素的索引为 1,而不是索引 0。例如,要 select 第三个元素,请使用 :nth-of-type(3)
.
但n
不限于此。可以用odd
和even
到select奇偶元素,用n
可以计算。然后它 selects 元素的索引可能是当 n
是任何整数时的答案。例如,当您使用 :nth-of-type(2n)
:
Values for "n" | Indices
----------------------------
0 | 2 * 0 = 0
1 | 2 * 1 = 2
2 | 2 * 2 = 4
3 | 2 * 3 = 6
... | ...
这 selects 索引是 2 的倍数的所有元素,因此所有元素都是偶数。另一个例子是 :nth-of-type(3+n)
:
Values for "n" | Indices
----------------------------
0 | 3 + 0 = 3
1 | 3 + 1 = 4
2 | 3 + 2 = 5
3 | 3 + 3 = 6
... | ...
这是 select 的所有元素,前两个除外。
:first-child
(:last-child
、:nth-child(n)
)也是如此。
尝试使用 Font-Awesome 图标定位每个活动 link。我正在尝试使用组合 os "Content:before" 和 "a::first-child".
用图标定位第三个 a-link "contact us",无效。尝试了很多组合。这甚至是 possible 吗? 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>
?
你给你的 link 一个 CLASS 并给他一个 font-family
.yourlink{
font-family: fantasy;
}
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#" class="yourlink">Contact Us</a>, <a href="#">Privacy policy</a>
</td>
为了向您的链接添加超棒的字体图标,只需在您的锚标记内使用 <i>
标记作为 <i class="fa fa-tags"></i>
。
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations<i class="fa fa-tags"></i></a>, <a href="#">Disclaimer<i class="fa fa-exclamation"></i></a>, <a href="#">Contact Us<i class="fa fa-phone"></i></a>, <a href="#">Privacy policy<i class="fa fa-info"></i></a>
</td>
参考 here 进行演示
.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.Use nth-of-type
选择器。
此外,如果没有 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 link: https://jsfiddle.net/rr78gfw1/1/
其他答案有更好的解决方案。这只是解释代码片段中的错误
- Pseudo-classes 和
:first-child
一样只有一个冒号,而不是两个。 :first-child
selects(在本例中)一个a
标签,它是.children.windowbg
的第一个 child。您尝试 select 的a
标签不是第一个 child,而是第一个类型。因此,您应该使用:first-of-type
.- 到select一个pseudo-element,使用冒号(
:before
)。现在您 select 在a
标签中添加了before
标签。 - 没有
table
的td
标签是无效的,标签在代码片段中被删除,所以为了测试,我把它包裹在table
和一个tr
标签。
.children.windowbg > a:first-of-type: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" />
<table>
<tr>
<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>
</tr>
</table>
其他答案更可取,因为当您更改链接的顺序或添加一个时,您需要更改 CSS(并且因为 CSS 不适用于 non-dynamic造型)。更好的解决方案是在 HTML.
中添加图标更新
有:first-of-type
到select类的第一个元素,一般在某个parent。要 select 最后一个 child,请使用 :last-of-type
。要select其他children,使用:nth-of-type(n)
,其中n
是元素的索引。第一个元素的索引为 1,而不是索引 0。例如,要 select 第三个元素,请使用 :nth-of-type(3)
.
但n
不限于此。可以用odd
和even
到select奇偶元素,用n
可以计算。然后它 selects 元素的索引可能是当 n
是任何整数时的答案。例如,当您使用 :nth-of-type(2n)
:
Values for "n" | Indices
----------------------------
0 | 2 * 0 = 0
1 | 2 * 1 = 2
2 | 2 * 2 = 4
3 | 2 * 3 = 6
... | ...
这 selects 索引是 2 的倍数的所有元素,因此所有元素都是偶数。另一个例子是 :nth-of-type(3+n)
:
Values for "n" | Indices
----------------------------
0 | 3 + 0 = 3
1 | 3 + 1 = 4
2 | 3 + 2 = 5
3 | 3 + 3 = 6
... | ...
这是 select 的所有元素,前两个除外。
:first-child
(:last-child
、:nth-child(n)
)也是如此。