Question

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

<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

＆＃13;

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

＆＃13;

.social.first {color: green;}

＆＃13;

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

＆＃13;

如何为一流的CSS设计风格

1 个答案: