: 자녀 (CSS 선택기)

설명 이 의사 급은 부모 요소의 첫 번째 자식 요소 인 경우에만 요소와 일치합니다. 예를 들어, Li : First-Child는 OL 또는 UL 요소의 첫 번째 목록 항목과 일치합니다. 목록 항목의 첫 번째 자식과 일치하지 않습니다. 예를 들어 위에서 언급 한 CSS 선택기를 사용해 보겠습니다.

다음과 같은 마크 업에 적용합시다.

첫 번째 목록 항목 요소 만 일치합니다. 이 의사 클래스는 요소에만 적용되며 텍스트를 위해 생성 된 익명 상자에는 적용되지 않습니다.

li:first-child {
  ⋮ <span>declarations
</span>}

example

<ul>
  <li>This item matches the selector li:first-child.</li>
  <li>This item does not match that selector.</li>
  <li>Neither does this one.</li>
</ul>

이 예제 선택기와 일치합니다 OL 또는 UL의 첫 번째 목록 항목 요소 : <.>

CSS에 대한 자주 묻는 질문 (FAQ) : 1 차 선택기 CSS의 첫 번째 유형과 : 첫 번째 유형의 차이점은 무엇인가? 요소 유형을 고려하지 않습니다. 예를 들어, DIV 요소와 부모 요소 내부에 P 요소가있는 경우 : First-Child는 DIV 요소를 부모의 첫 번째 자식으로 타겟팅합니다. 반면, 첫 번째 유형은 부모 내에서 특정 유형의 요소의 첫 번째 발생을 대상으로합니다. 따라서 사용하는 경우 : P 요소의 첫 번째 유형은 부모의 첫 번째 자식 여부에 관계없이 첫 번째 P 요소를 대상으로합니다. 예를 들어, 특정 클래스의 첫 번째 자식을 선택하려면 구문 ".className : First-Child"를 사용할 수 있습니다. 이것은 클래스“className”의 첫 번째 자식 요소를 선택합니다.

: 1 차 자녀 선택기는 중첩 된 요소와 함께 작동합니까?

: 1 차 자녀 선택기는 부모 요소의 직접 어린이 만 고려합니다. 중첩 된 요소가있는 경우 고려하지 않습니다. 예를 들어, 다른 div 요소 내에 div 요소가 있고 다음을 사용하는 경우, 1 차 선택기를 사용하는 경우 중첩 된 요소가 아닌 첫 번째 DIV 요소 만 고려합니다.

li:first-child {
  ⋮ <span>declarations
</span>}

CSS의 마지막 자식 선택기가 있습니까? 그것은 다음과 비슷하게 작동하지만 부모 요소의 첫 번째 자식을 선택하는 대신 마지막 자식을 선택합니다.

Pseudo-Elements와 함께 1 차 선택기를 사용할 수 있습니까? 의사 요소는 텍스트 블록의 첫 번째 글자 또는 줄과 같은 요소의 특정 부분을 스타일링하는 데 사용되며 요소의 자녀로 간주되지 않습니다.<:> : 반응 형 디자인에 사용되는 일차 자녀 선택기는 어떻게됩니까?

: 1 차 자녀 선택기는 반응 형 디자인에 사용하여 화면 크기에 따라 첫 번째 자식 요소를 다르게 스타일링 할 수 있습니다. 예를 들어, 화면 크기가 변경 될 때 첫 번째 자식 요소의 색상, 글꼴 크기 또는 레이아웃을 변경하는 데 사용할 수 있습니다.

1 차 선택기를 다른 선택기와 결합 할 수 있습니까? 예를 들어, 클래스 선택기와 함께 특정 클래스의 첫 번째 자식을 대상으로하거나 요소 선택기와 함께 특정 유형의 요소의 첫 번째 자식을 타겟팅하기 위해 요소 선택기와 함께 사용할 수 있습니다.

1 차 자녀 선택기에는 모든 브라우저 호환성 문제가 있습니까?

: 첫 번째 자식 선택기는 Chrome, Firefox 및 Edge 및 Edge를 포함하여 모든 최신 브라우저에서 지원됩니다. 그러나 Internet Explorer 8 및 이전 버전에서는 지원되지 않습니다.

: 1 차 자식 선택기를 사용하여 텍스트 노드를 대상으로 할 수 있습니까?

아니요 : 1 차 자녀 선택기는 텍스트 노드를 대상으로 할 수 없습니다. 요소 노드 만 타겟팅 할 수 있습니다. 텍스트 노드를 스타일로 만들려면 텍스트 노드를 요소로 랩핑 한 다음 해당 요소를 대상으로해야합니다.

: 1 차 자녀 선택기는 공백을 처리하는 방법?

: 1 차 선택기는 공백을 무시합니다. 텍스트 노드가 아닌 요소 노드 만 고려합니다. 따라서 첫 번째 자식 요소 앞에 공백이있는 경우 : 1 차 선택기에 영향을 미치지 않습니다.

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