css - 定位 CSS 类的第二个实例

Question

由于我使用的解决方案，我只有有限的 CSS 类。当有 2 个同名的类时，我想知道是否有一种方法可以针对第 2 个类。

我有 2 个包含在名为 item 的 DIV 中的媒体链接实例。我基本上需要为类的第二个实例添加额外的样式。然而，这就是困难所在......我不能在代码中添加任何额外的代码或类！我知道，这并不理想，但取决于所使用的解决方案，而不是个人选择。

示例代码：

<a href="#" class="media-link" style="display: block">
  <img src="images/ph-a.png" alt="" />
</a>
<a href="#" class="media-link">
  <img src="images/auth-2-100px.png" alt="" />
  <p class="author">Author: John Smith</p>
</a>

提前感谢您的任何建议或解决方案。

Answer 1

有两个伪选择器可以完成您正在寻找的内容。

.media-link:nth-child(2) {
  // here style 
}

或者

.media-link:nth-of-type(2){
  // here style
}

Answer 2

你可以nth-child pseudo classes根据你的要求使用......

.media-link:nth-child(2) {
color:red;
}