试图选择一个没有它自己的类的特定链接

Question

我是这个高级CSS内容的新手，我想知道是否有办法在下面的代码中只选择第一个标签。每个链接都在一个div中，并且它们都具有相同的类，因此如果我将CSS设置为.jetpack-social-widget-item，它将全部应用于它们。我只想要第一个css。如果没有编辑代码并手动添加一个类，这可能吗？这是一个主题，所以我不想编辑代码。

<ul class="jetpack-social-widget-list size-large">
<li class="jetpack-social-widget-item"><a href="#" target="_blank">Facebook</a>
                        </li>
<li class="jetpack-social-widget-item"><a href="#" target="_blank">Twitter</a>
                        </li>
<li class="jetpack-social-widget-item"><a href="http://instagram.com" target="_blank">Instagram</a>
                        </li>
</ul>

Answer 1

.jetpack-social-widget-item:first-of-type a {
  color: red;
}

有关更多高级示例，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

Answer 2

你可以通过各种方式做到这一点。这是一对夫妇：

.jetpack-social-widget-item:first-child a {
    color: red;
}

.jetpack-social-widget-item:nth-child(1) a {
    color: red;
}