使用 CSS 定位具有重复类的元素答案

【问题标题】：Use CSS to target an element that has a duplicate class使用 CSS 定位具有重复类的元素
【发布时间】：2014-09-05 18:56:42
【问题描述】：

在我的 HTML 中，我有 2 行具有相同的类。我希望能够只针对第一个元素，但似乎无法弄清楚。我能够定位这两个元素，但是当我更改 CSS 以选择第一个子元素时，它不会返回任何内容。

这是 CSS 和重复的类

如果我使用svg g.highcharts-axis-labels，它将同时选择两个元素。

我尝试像下面这样选择第一个孩子，但它没有返回任何带有该 CSS 的元素。

svg g.highcharts-axis-labels:nth-child(1)

谁能指出我犯的错误。

【问题讨论】：

【解决方案1】：

.highcharts-axis-labels 跟在 .highcharts-data-labels 类的元素之后。所以你可以写：

.highcharts-data-labels + .highcharts-axis-labels {}

以第一个为目标。

【讨论】：

【解决方案2】：

所以，对于您的问题，为什么“它不返回任何带有该 CSS 的元素”。根据定义

:nth-child(n) 选择器匹配第 n 个元素子，无论类型，它的父。

有了这个选择器和你的 html，

svg g.highcharts-axis-labels:nth-child(1)

父母是“svg”，孩子是位置1的“g.highcharts-axis-labels”（在“svg”标签下的所有孩子的列表中）。但是位置 1 的孩子不是“g.highcharts-axis-labels”。因此结果是“没有元素”。

【讨论】：

【解决方案3】：

.highcharts-axis-labels:nth-of-type(1) 应该选择第一个元素。

【讨论】：

如果您查看屏幕截图，您会注意到第一个.highcharts-axis-labels 是g 类型，这意味着所需的元素是第七个类型。硬编码7 可能不实用。
不错的皮卡，我没注意到。

【解决方案4】：

你想要nth-of-type伪类：

.highcharts-axis-labels:nth-of-type(2) {

}

【讨论】：

输入nth-of-type是什么意思？
来自我的回答中的链接： :nth-of-type(n) 选择器匹配其父元素的特定类型的第 n 个子元素。
如果您查看屏幕截图，您会注意到第一个 .highcharts-axis-labels 是 g 类型，这意味着所需的元素是第七个类型。
这个答案错误且具有误导性。 @SalmanA 的建议可行（:nth-of-type(7)）。但应该清楚的是，此答案中给出的选择器不会选择问题中要求的内容。我猜答案被接受了，因为它让提问者走上了正确的道路。
@pep - 你是对的。我接受了答案，因为使用 nth-of-type 是正确的选择。我对 SalmanA 的建议投了赞成票，因为它声明使用 7 而不是 2。