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

Question

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

这是CSS和重复的类

如果我使用svg g.highcharts-axis-labels，则会选择这两个元素。

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

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

有人可以指出我正在犯的错误。

Answer 1

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

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

定位第一个。

Answer 2

所以，对于你的问题，为什么＆＃34;它没有返回任何带有CSS＆＃34;的元素。 根据定义

  

：nth-​​child（n）选择器匹配第n个元素   孩子，，无论其类型，是否为其父母。

使用此选择器和您的html，

  

svg g.highcharts-axis-labels：nth-​​child（1）

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

Answer 3

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

Answer 4

你想要nth-of-type伪类：

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

}

http://www.w3schools.com/cssref/sel_nth-of-type.asp