目标定位CSS类的第二个实例

Question

由于我使用的解决方案，我只有有限的CSS类。我想知道是否有办法在存在两个相同名称的类时定位到第二个类。

我有一个名为item的DIV中包含2个media-link实例。 我需要为第二个类实例添加额外的样式。 但是这就是困难所在......我不能添加任何其他代码或类！ 我知道，这不是理想的，但它取决于使用的解决方案，而不是个人选择。

示例代码：

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

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

- thatuxguy

Answer 1

有两个伪选择器可以实现你所需的功能。

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

或者

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

- Rohit Azad Malik

---

看起来不错，Rohit。我会测试一下，看看效果如何 ;) - thatuxguy

虽然这个解决方案适用于上述特定情况，但需要注意的是：nth-of-child和nth-of-type不能选择具有提供的类的第n个实例。相反，它们会选择在父元素中作为第n个子元素或指定类型的元素具有提供的类的元素。例如：https://jsfiddle.net/0Lsan8vb/ - David

哦，我的天啊，那是一个非常重要的警告。 - temporary_user_name

Answer 2

您可以使用nth-child伪类来满足您的需求...

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

- Shailender Arora