첫 번째 직접 자식만을 위한 CSS 셀렉터가 있습니까?

첫 번째 직접 자식만을 위한 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 contents 1"에 적용되고 있는 것을 이해할 수 없습니다. <div>"header"뿐만 아니라 <div>.

저는 스타일의 선택자가 "섹션"이라는 클래스를 가진 디브의 첫 번째 직접 자식에게만 적용될 것이라고 생각했습니다.제가 원하는 것을 얻으려면 어떻게 셀렉터를 변경해야 합니까?

당신이 올린 글은 말 그대로 "섹션 디브 안에 있고 부모의 첫 자녀인 디브를 찾아라"라는 의미입니다.서브에는 해당 설명과 일치하는 태그가 하나 포함되어 있습니다.

당신이 메인 디브의 두 자녀를 모두 원하시는지 아닌지는 저에게 불분명합니다.그렇다면 다음을 사용합니다.

div.section > div

헤더만 원하는 경우 다음을 사용합니다.

div.section > div:first-child

사용.>는 설명을 "섹션 디브의 직계 후손인 모든 디브 찾기"로 변경합니다.

IE6를 제외한 모든 주요 브라우저에서 이 방식을 지원합니다.IE6 지원이 미션 크리티컬한 경우, 하위 디브에 클래스를 추가하고 대신 이 클래스를 사용해야 합니다.그렇지 않으면 신경 쓸 가치가 없어요.

Google에서 이 질문을 검색했습니다.클래스가 있는 요소의 첫 번째 자식을 반환합니다.container, 아이가 어떤 유형이든 간에

.container > *:first-child
{
}

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여전히 검은 색일 겁니다

당신의 경우 직접 첫째 자녀에 대한 CSS 선택기는 다음과 같습니다.

.section > :first-child

직접 선택은 >이고 첫번째 자식 선택은 :first-child입니다.

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

div.section > :first-child

사용하다div.section > div.

더 좋은 것은, a를 사용하는 것입니다.<h1>표제와 표제를 붙입니다.div.section h1오래된 브라우저를 지원하기 위해 CSS에서 (모를 당신의 CSS에서.>마크업의 의미를 유지합니다.

div.section > div

정확히 질문은 아니지만 유용할 수도 있습니다.

div.section > :first-child:is(div)

이것은 .section의 첫 번째 자식 요소와 일치하며 디바인 경우에만 일치합니다.

일치 항목:

<div class="section">
  <div>MATCH</div>
  <div>NO MATCH</div>
  <div>
     <div>NO MATCH</div>
  </div>
</div>

일치하는 항목 없음:

<div class="section">
  <img ... >
  <div>NO MATCH</div>
  <div>NO MATCH</div>
  <div>
     <div>NO MATCH</div>
  </div>
</div>

Tailwind CSS(v3.1)를 임의의 변형으로 사용할 때 해결한 방법입니다.나는 단지 테이블의 첫번째 칸이 링크이기 때문에 호빙할 때 밑줄이 그어져 있기를 원했습니다.

[&>:first-child]:hover:underline

언급URL : https://stackoverflow.com/questions/2094508/is-there-a-css-selector-for-the-first-direct-child-only