내 HTML에는 동일한 클래스의 두 줄이 있습니다. 첫 번째 요소 만 타겟팅하고 싶지만 알아낼 수는 없습니다. 두 요소를 모두 타겟팅 할 수 있지만 CSS를 변경하여 첫 번째 자식을 선택하면 아무 것도 반환하지 않습니다.CSS를 사용하여 중복 클래스가있는 요소를 대상으로 지정
다음은 CSS와 중복 클래스 
내가 svg g.highcharts-axis-labels를 사용하는 경우,이 두 요소를 선택할 것이다.
아래 첫 번째 자식을 선택했지만 해당 CSS가있는 요소를 반환하지 않았습니다.
svg g.highcharts-axis-labels:nth-child(1)
누군가 내가 실수하려고하고 있음을 지적 할 수 있습니까?
.highcharts-axis-labels:nth-of-type(2) {
}
http://www.w3schools.com/cssref/sel_nth-of-type.asp
당신은 nth-of-type 의사 클래스를 원한다. 그래서 다음과 같이 쓸 수 있습니다 :
.highcharts-data-labels + .highcharts-axis-labels {}
첫 번째 것을 목표로하십시오.
'nth-of-type '에 타입이 무엇을 의미합니까? –
내 대답에있는 링크 : : nth-of-type (n) selector는 n 번째 자식 인 특정 유형의 부모 요소와 일치합니다. – Mandu
스크린 샷을 보면 첫 번째 .highcharts-axis-labels은 유형이 g이고 원하는 요소가 일곱 번째 유형임을 의미합니다. –
.highcharts-axis-labels:nth-of-type(1)은 첫 번째 요소를 선택해야합니다.
스크린 샷을 보면 첫 번째 '.highcharts-axis-labels'이 'g'유형이고 원하는 요소가 7 번째 유형임을 의미합니다. '7' 하드 코딩은 실용적이지 않을 수도 있습니다. –
좋은 픽업, 나는 그것을 알아 채지 못했습니다. –
왜, "그 CSS로 어떤 요소도 돌려주지 않는 이유"에 대한 질문. 정의
,에있어서, : n 번째 자식 (n)의 선택은 부모의 n 번째 자식 , 없이 유형 인의 모든 요소 일치한다. 이 선택하고 HTML을
SVG의 g.highcharts 축 - 라벨 : n 번째 자녀 (1)
부모는 아이입니다 "SVG" 위치 1 ("svg"태그 아래에있는 모든 하위 목록의 "g.highcharts-axis-labels")이됩니다. 그러나 1 위의 자식은 "g.highcharts-axis-labels"이 아닙니다. 따라서 결과는 "요소 없음"입니다.
어떤 브라우저를 지원해야합니까? – n8wrl