使用CSS來定位具有重複類的元素

在我的HTML中，我有兩行具有相同的類。我希望能夠只瞄準第一個元素，但似乎無法弄清楚。我能夠定位兩個元素，但是當我更改CSS來選擇第一個子元素時，它不會返回任何內容。使用CSS來定位具有重複類的元素

這裏是CSS和重複類 enter image description here

如果我使用svg g.highcharts-axis-labels，它會選擇兩個元素。

我試過選擇像下面這樣的第一個孩子，但是它沒有返回帶有該CSS的任何元素。

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

有人能指出我犯的錯誤嗎？

2014-09-05 TestRaptor

您需要支持哪些瀏覽器？ – n8wrl 2014-09-05 19:01:04

-3

你想nth-of-type僞類：

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

}

2014-09-05 18:59:24 Mandu

鍵入'nnth-of-type'是什麼意思？ – 2014-09-05 19:03:26

從我的答案中的鏈接：nth-type-type（n）選擇器匹配每個元素，它是父級的特定類型的第n個子元素。 – Mandu 2014-09-05 19:05:23

如果你看截圖，你會發現第一個.highcharts-axis-labels是g類型的，這意味着所需的元素是第七個類型。 – 2014-09-05 19:10:57

.highcharts-axis-labels如下與.highcharts-data-labels類的元素。所以你可以寫：

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

定位第一個。

2014-09-05 19:04:24

+1是表示理解這些選擇器和僞類的唯一答案。 – 2014-09-05 19:29:37

你的意思是第二個？ '+'匹配右側。（抱歉necro） – Kroltan 2015-05-22 11:16:28

@SalmanA啊，我誤讀了這張圖片。抱歉! – Kroltan 2015-05-23 14:20:34

-1

.highcharts-axis-labels:nth-of-type(1)應選擇第一個元素。

2014-09-05 19:07:01

如果你看截圖，你會發現第一個'.highcharts-axis-labels'的類型是'g'，這意味着所需的元素是第七個元素。硬編碼「7」可能不實用。 – 2014-09-05 19:09:17

不錯的皮卡，我沒有注意到。 – 2014-09-05 19:59:10

因此，對於你的問題，爲什麼「它沒有返回任何元素與該CSS」。根據定義

的：第n個孩子（n）的選擇器的每個元素是其父的第n個子，無論型的，相匹配。

有了這個選擇，你的HTML，

SVG g.highcharts軸標籤：第n個孩子（1）

父是「SVG」，孩子成爲位置1處的「g.highcharts-axis-labels」（在「svg」標籤下的所有兒童列表中）。但位置1的孩子不是「g.highcharts-axis-labels」。因此結果是「沒有元素」。

2016-09-08 04:05:27 vothaison

回答