아동 선택기 (CSS 선택기)

설명 이 선택기는 지정된 요소의 직계 어린이 인 모든 요소와 일치합니다. 어린이 선택기의 콤비네이터는 (>)보다 더 큰 징후입니다. Whitespace 문자로 둘러싸여있을 수 있지만 Windows의 Internet Explorer 5는이를 자손 선택기로 잘못 처리합니다. 따라서 모범 사례는이 콤비네이터 주위의 공백을 피하는 것입니다.

이 html 조각을 고려하십시오 :

위의 조각의 요소를 아래 선택기와 일치시켜 보자.

위의 아동 선택기는 UL 요소의 어린이 인 두 개의 LI 요소와 일치합니다. 부모가 ol 요소이기 때문에 하위 항목과 일치하지 않습니다.

예제

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

직장에서 아동 선택기의 예는 다음과 같습니다

이 선택기는 ul 요소의 직계 자녀 인 모든 Li 요소와 일치합니다. CSS Child Selectors

에 대한 자주 묻는 질문 (FAQ) CSS에서 아동 선택기와 자손 선택기의 차이점은 무엇입니까?

ul>li {
  ⋮ <span>declarations
</span>}

CSS에서, 아동 선택기는 특정 부모 요소의 직접 어린이 만 목표로하는 반면, 후손 선택기는 깊이 깊은 곳에 관계없이 특정 조상 요소로부터 내려 오는 모든 요소를 ​​목표로합니다. 자식 선택기는 ">"기호를 사용하고 자손 선택기는 공간을 사용합니다. 예를 들어, "div> p"는 div의 직접적인 어린이 인 단락 만 선택하는 반면, "div p"는 둥지 수준에 관계없이 div 내의 모든 단락을 선택합니다.

CSS를 사용하여 요소의 첫 번째 자식 만 선택하는 방법은 무엇입니까?

CSS에서 요소의 첫 번째 자식 만 선택하려면 ": First-Chlass"Ppeudoud "Ppeudoud. 예를 들어, "div> p : first-Child"는 div의 직접 자녀 인 첫 번째 단락 만 선택합니다. 이것은 요소의 첫 번째 자식에만 스타일을 적용하고 싶을 때 유용합니다.

자식 선택기를 사용하여 속성을 기반으로 요소를 대상 요소를 사용 할 수 있습니까? 예, 자식 선택기를 속성 선택기와 조합 할 수 있습니다. 예를 들어, "div> input [type = 'text"]는 div. 의 직접적인 어린이 인 모든 텍스트 입력 필드를 선택합니다. 자식 선택기는 클래스 및 ID 선택기와 어떻게 작동합니까?

ul>li {
  ⋮ <span>declarations
</span>}

어린이 선택기는 클래스 및 ID 선택기와 관련하여 특정 요소를 대상으로 할 수 있습니다. 예를 들어, "#MyDiv> .MyClass"는 ID "MyDiv"가있는 요소의 직접 어린이 인 클래스 "MyClass"가있는 모든 요소를 ​​선택합니다. 자식 선택기를 사용하여 요소의 마지막 자식 만 타겟팅 할 수 있습니까?

예, 어린이 선택기와 함께“: last-Child”의사 클래스를 사용하여 요소의 마지막 자식 만 타겟팅 할 수 있습니다. 예를 들어, "div> p : last-Child"는 Div.

의 직접적인 자식 인 마지막 단락 만 선택합니다.

어린이 선택기는 어떻게 반응 형 디자인에서 어떻게 작동합니까?

어린이 선택기는 응답 디자인에 사용하여 부모의 규모 또는 다른 속성에 따라 다른 스타일을 요소에 적용 할 수 있습니다. 이것은 화면 크기 또는 장치 유형을 기반으로 레이아웃과 스타일을 조정하는 데 유용 할 수 있습니다.

의사 요소와 함께 자식 선택기를 사용할 수 있습니까?

예,“:: prever”및“:: after”와 같은 의사 요소와 함께 자식 선택기를 사용할 수 있습니다. 예를 들어,“div> p :: prever”는 div. 의 직접적인 어린이 인 모든 단락의“:: prever”pseudo element를 선택하여 CSS에서 특이성이 어떤 스타일이 상충되는 규칙이있을 때 어떤 스타일이 적용되는지 결정합니다. 아동 선택기는 규칙의 특이성을 증가시켜 특이성이 낮은 충돌 규칙을 대체합니다. 예를 들어, "div> p"는 단지 "p"보다 특이성이 높습니다.

아동 선택기를 사용하여 홀수 또는 어린이 만 대상으로 할 수 있습니까?

예, 어린이 선택기와 함께 홀수 또는 어린이 만 타겟팅하여 ": nth-Child"의사 클래스를 사용할 수 있습니다. 예를 들어, "div> p : nth-child (홀수)"는 Div.의 직접적인 어린이 인

아동 선택기에 대한 브라우저 지원은 무엇입니까?

Child Selector는 Chrome, Firefox, Safari 및 Edge를 포함한 모든 현대식 브라우저에서 지원됩니다. 그러나 인터넷 익스플로러 6 개 이상의 버전에서는 지원되지 않습니다. 고급 CSS 선택기를 사용할 때는 항상 현재 브라우저 지원을 확인하십시오.

위 내용은 아동 선택기 (CSS 선택기)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!