2014-09-05 44 views
1

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

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

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

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

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

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

+0

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

回答

-3

你想nth-of-type僞類:

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

} 

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

+0

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

+0

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

+4

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

3

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

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

定位第一個。

+1

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

+0

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

+0

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

-1

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

+0

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

+0

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

1

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

的:第n個孩子(n)的選擇器的每個元素是其父的第n個 子,無論型的,相匹配。

有了這個選擇,你的HTML,

SVG g.highcharts軸標籤:第n個孩子(1)

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