定位 CSS 类的第二个实例答案

【问题标题】：Target the 2nd instance of a CSS Class定位 CSS 类的第二个实例
【发布时间】：2021-01-29 20:15:18
【问题描述】：

由于我使用的解决方案，我只有有限的 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>

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

【问题讨论】：

标签： css css-selectors

【解决方案1】：

有两个伪选择器可以完成你正在寻找的东西。

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

或

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

【讨论】：

Rohit 看起来不错，我会测试一下看看效果如何；)
虽然此解决方案适用于上面列出的特定场景，但应注意 nth-of-child 和 nth-of-type 不会选择具有提供的类的元素的第 n 个实例。相反，他们选择具有提供的类的元素，如果它是与父元素相关的第 n 个类型或第 n 个子元素。示例：jsfiddle.net/0Lsan8vb

【解决方案2】：

您可以使用nth-child pseudo classes 来满足您的要求....

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

【讨论】：