尝试使用独特的超棒字体图标定位每个 link

Question

尝试使用 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>

?

https://jsfiddle.net/rr78gfw1/

Answer 1

你给你的 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>

Answer 2

为了向您的链接添加超棒的字体图标，只需在您的锚标记内使用 <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 进行演示

Answer 3

.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/

Answer 4

其他答案有更好的解决方案。这只是解释代码片段中的错误

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 的所有元素，前两个除外。

Explanation from MDN.

:first-child（:last-child、:nth-child(n)）也是如此。

尝试使用独特的超棒字体图标定位每个 link

Trying to target each a link with a unique font-awesome icon

html

css

font-awesome

更新