2011-09-28 3 views
18

나는 Asp.Net MVC 3 프로젝트를 진행하고 있는데 나는 그것이해야한다고 생각처럼 문제가 해결되지 않는 이유에 벽돌 벽에 실행했다.왜이 CSS : first-child selector가 작동하지 않습니까?

내 태그는 다음과 같습니다

<fieldset> 
    <input type="hidden" value="2"> 
    <div class="editor-label"> 
     <label for="Name"> Name</label> 
    </div> 
    ... 
</fieldset> 

내 CSS는 다음과 같습니다

.display-label, .editor-label 
{ 
    margin: 0.8em 0 0 0; 
    font-weight: bold; 
    display: inline; 
} 

fieldset > div:first-child 
{ 
    margin: 0; 
} 

나는 FIELDSET의 첫 번째 DIV을 할 일은 원하는 건 내가 선택기 생각 0의 여유를 가지고 fieldset > div:first-child은 "필드 세트의 첫 번째 하위 요소 인 div 유형"에 스타일을 적용하지만 분명히 뭔가가 나를 벗어납니다. 내 선택기 덤비는 오래된 브라우저하지 그래서

나는 IE9/FF/크롬에서 이것을 시도했습니다.

감사합니다.

+0

fieldset> div.editor-label : first-child {margin-top : 0} – albert

+0

이 (가) http://jsfiddle.net/VcRyL/ 여기에서 작동하는 것으로 보입니다. 속성 규칙 무시가 없는지 확인하십시오. 작동하지 않는이 규칙 –

+0

@AndreDublin : http://jsfiddle.net/5dAKL/1 –

답변

44

fieldset > div:first-child는 "그것은 divfieldset 경우의 첫 번째 자식 요소를 선택합니다"를 의미한다.

그것은 의미 "는 fieldset의 첫 div을 선택"하지 않습니다.

이 경우 첫 번째 아이는 <input type="hidden" value="2">입니다.

는 HTML을 변경하지 않고 그 div를 선택하려면 fieldset > div:first-of-type를 사용해야합니다.

불행히도 :first-child은 널리 지원되지만 은 IE9 이상 및 다른 최신 브라우저에서만 작동합니다.

그래서이 경우 가장 좋은 해결 방법은 fieldset > div:first-child을 계속 사용하고 <input type="hidden" value="2">을 이동하여 첫 번째 자녀가 아니게하는 것입니다.

+2

아, 그게 더 의미가 있습니다. '> div : first-child '도 "_IF_ it div"를 의미한다는 것을 몰랐습니다. 나는 처음으로 일치하는 자식을 항상 선택했다고 생각했습니다. 내 클라이언트가 IE8에 지금 붙어 있기 때문에 마크 업을 다시 정렬해야합니다. 감사합니다. –

관련 문제