CSS选择器在＆＃39;之前添加＆＃39;内容不是第一个选择器

Question

我正在尝试修改一些CSS，它基本上只会在它不是第一个使用CSS的类型时运行 - 以下工作但是为所有选择器显示？

.networks-body.all .facebook.interaction-container::before
{
  content: "\f09a";
  margin-right: 2px;
}

Answer 1

尝试在假类:not(:first-of-type)

之前链接::before

.facebook.interaction-container:not(:first-of-type)::before {
    ...    
}

Answer 2

编辑：fcalderan的答案更清晰;）

您可以将前置添加到所有元素，然后将其从第一个类型中删除：

.networks-body.all .facebook.interaction-container::before{
    content: "\f09a";
    margin-right: 2px;
}

.networks-body.all .facebook.interaction-container:first-of-type::before{
   content: none;
}

示例：https://jsfiddle.net/mfge1or3/

Answer 3

您可以在此处使用nth-of-type(1n+1)，但最后仍然包含::before。

括号内1n表示选择每个实例，而+2表示从第二个实例开始。换句话说，选择除之外的所有实例。

.facebook.interaction-container:nth-of-type(1n+2)::before {
  content: "\f09a";
  margin-right: 2px;
}

示例：

li:nth-of-type(1n+2)::before {
  content: 'A';
  color: red;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>