如何风格一流的CSS

Question

我class="social"在这样的HTML块：

<ul> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
    <li><a href="#">Link 5</a></li> 
    <li><a href="#" class="social">Facebook</a></li> 
    <li><a href="#" class="social">Instagram</a></li> 
    <li><a href="#" class="social">Youtube</a></li> 
</ul> 

我怎么能与class="social"样式的第一要素。我尝试过使用不同的方式，但没有按预期工作。如果只使用CSS，效果会更好。

Answer 1

你可以这样做的jQuery，但我不知道的方法，使这项工作只用CSS因为没有:first-of-class存在

$('a.social').eq(0).addClass('first');

.social.first {color: green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
    <li><a href="#">Link 4</a></li> 
 
    <li><a href="#">Link 5</a></li> 
 
    <li><a href="#" class="social">Facebook</a></li> 
 
    <li><a href="#" class="social">Instagram</a></li> 
 
    <li><a href="#" class="social">Youtube</a></li> 
 
</ul>