첫 번째 직계 자녀만을위한 CSS 선택기가 있습니까?

다음 HTML이 있습니다

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

그리고 다음 스타일 :

DIV.section DIV:first-child 
{
  ...
}

내가 이해하지 못하는 이유 때문에 스타일이 "sub content 1" <div> 및 "header"에 적용되고 <div> 있습니다.

스타일의 선택기는 "section"이라는 클래스가있는 div의 첫 번째 직접 하위에만 적용된다고 생각했습니다. 선택기를 변경하여 원하는 것을 얻을 수 있습니까?

당신이 문자 그대로 게시 한 것은 "섹션 div 안에 있고 부모의 첫 번째 자식 인 div를 찾으십시오"를 의미합니다. 하위에는 해당 설명과 일치하는 하나의 태그가 포함되어 있습니다.

메인 div의 두 자녀를 원하는지 여부는 확실하지 않습니다. 그렇다면 다음을 사용하십시오.

div.section > div

헤더 만 원하면 다음을 사용하십시오.

div.section > div:first-child

>변경 내용을 사용하여 설명을 다음과 같이 변경합니다. "섹션 div의 직계 자손 인 div를 찾으십시오".

IE6을 제외한 모든 주요 브라우저가이 방법을 지원합니다. IE6 지원이 미션 크리티컬 한 경우 자식 div에 클래스를 추가하고 대신 사용해야합니다. 그렇지 않으면 걱정할 가치가 없습니다.

Google에서이 질문을 검색했습니다. 이것은 자식의 container유형에 관계없이 class가있는 요소의 첫 번째 자식을 반환합니다 .

.container > *:first-child
{
}

규칙이 상속되므로 CSS를 CSS (Cascading Style Sheets)라고합니다. 다음 선택기를 사용 합니다 부모의 단지 직접 아이를 선택,하지만 규칙이됩니다 상속 그에서 div의 어린이 divs:

div.section > div { color: red }

이제 그 div 와 그 자녀 모두 가 될 것입니다 red. 상속하지 않으려면 부모에 설정 한 내용을 취소해야합니다.

div.section > div { color: red }
div.section > div div { color: black }

이제 div직계 자녀 인 단 하나만 div.section빨갛게되지만 그 자녀들 divs은 여전히 ​​검은 색입니다.

div.section > div

사용하십시오 div.section > div.

더 좋은 방법 <h1>은 제목과 div.section h1CSS에 태그를 사용하여 이전 브라우저 (에 대해 모르는 >)를 지원 하고 마크 업을 의미 적으로 유지하는 것입니다.

귀하의 경우 직접 첫 자녀를위한 CSS 선택기는 다음과 같습니다.

.section > :first-child

직접 선택기는>이고 첫 번째 자식 선택기는 : first-child

다른 사람들이 제안한 것처럼 : 앞에 별표가 필요하지 않습니다. 태그를 추가하여이 솔루션을 수정하여 DOM 검색 속도를 높일 수 있습니다.

div.section > :first-child