CSS3 첫 번째 자식 선택기 실제 코드

이 글은 주로 first-child와 :first-of-child의 차이점과 IE 호환성 문제를 포함하여 CSS3 first-child 선택자의 실용적인 전략을 소개합니다. 설명이 필요한 친구는

CSS의 :first-child 선택기를 참조하여 특정 요소
HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

// 只套用编号 1 的 li   
li:first-child {   
    color: green;   
}

장자와 장자의 차이
다음과 같은 HTML 코드가 있다고 가정해 보겠습니다.

<p>
    <p>第1个元素</p>
    <h1 id="第-个元素">第2个元素</h1>
    <span>第3个元素</span>
    <span>第4个元素</span>
</p>

CSS 선택기:우리는 다음에서 요소를 찾고 싶습니다. 다음
메소드를 정의합니다. - p:first-child는 p 요소와 일치합니다. 왜냐하면 p 요소는
h1:first-child이기 때문입니다. 요소와 일치하지 않습니다. 여기서 h1은 첫 번째 하위 요소가 아니라 p의 두 번째 하위 요소이기 때문입니다.
span:first-child는 어떤 요소와도 일치할 수 없습니다. 여기에서 두 가지 스팬 요소 모두 p의 첫 번째 하위 요소가 아니기 때문입니다. -child는 p 요소와 일치합니다. 여기서 p의 첫 번째 하위 요소는 p이기 때문입니다.
위의
적용된
스타일 중 두 개는 일치할 수 없지만 당황하지 마세요. CSS도 정의합니다: first-of-child pseudo-class , 살펴보세요. 사용법 및 설명: p:first-of-type
은 p 요소와 일치합니다. 왜냐하면 p는 모든 p의 하위 요소 중 첫 번째이기 때문입니다. 실제로 p의 하위 요소는 h1:first-of-type은 h1 요소와 일치합니다. 왜냐하면 h1은 h1인 p의 모든 하위 요소 중 첫 번째 요소이기 때문입니다. span:first-of. -type은 세 번째 하위 요소 범위와 일치합니다. 여기서 p에는 범위인 두 개의 하위 요소가 있으며 첫 번째 요소가 일치합니다. :first-of-type은 p 요소와 일치합니다.

요약
:
:first-child는 구조라고 할 수 있는 상위 요소의 첫 번째 하위 요소와 일치합니다. 첫 번째 하위 요소가 켜져 있습니다. :first-of-type은 유형의 첫 번째 항목과 일치합니다. 유형은 무엇을 참조합니까? 콜론 이전에 일치하는 항목입니다. 예를 들어 p:first-of-type은 모든 p 중 첫 번째 항목을 나타냅니다. 요소 하나. 여기서 첫 번째 하위 요소는 이 유형의 첫 번째 요소인 한 제한이 없습니다. 물론 이러한 요소의 범위는 모두 동일한 수준, 즉 피어에 속합니다. 같은 유형의 선택자 :last-child 및
:last-of-type
, :nth-child(n) 및 :nth-of-type(n)도 이런 방식으로 이해될 수 있습니다. .

IE와의 호환성 문제

먼저 다음 코드, HTML 부분을 살펴보세요.

<ul class="example">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</ul>

CSS 부분:

.example li{float:left;margin-left:10px;}

첫 번째 li의 왼쪽 여백을 0px로 설정해야 하는 경우 다음 방법을 사용하면 됩니다.

.example li{float:left;margin-left:10px;}   
.example li:first-child{margin-left:0;}

그러나 IE6은 :child-first 메소드를 지원하지 않으므로 IE6도 :child-first 메소드를 지원하도록

표현식

을 사용해야 합니다. 코드는 다음과 같습니다.

.example li{float:left; margin-left:10px; _margin-left:expression(this.previousSibling==null?'0px':'10px');}   
.example li:first-child{margin-left:0;}

물론

정적class

를 추가하여 재정의할 수도 있습니다. 🎜> 페이지라면 괜찮습니다. Li를 출력하기 위해 을 반복해야 한다면 최소한 프로그램이 판단을 덜 할 수 있도록 하는 child-first를 사용하는 것이 좋습니다.

위 내용은 CSS3 첫 번째 자식 선택기 실제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!