CSS3의 선택기 예에 대한 자세한 설명

영문 원문: www.456bereastreet.com/archive/200601/css_3_selectors_explained/ 중국어 번역: www.dudo.org/article.asp?id=197 참고: 이 기사는 IE7, IE8 및 Firefox3이 아직 출시되지 않은 2006년 1월에 작성되었습니다. 기사에 언급된 모든 브라우저 지원에는 이러한 세 가지 브라우저 버전이 포함되지 않았습니다. IE8 및 Fir
:nth-of-type()
:nth-of-type() pseudo-class 및 nth-child() pseudo-에서 사용 class 이 메소드는 규칙에 지정된 유형의 요소와 일치한다는 점을 제외하면 매우 유사합니다. 다음 규칙은 상위 요소의 세 번째 하위 요소에 속하는 모든 p 요소와 일치합니다(하나의 세 번째 하위 요소에 속하는 p 요소가 많을 수 있지만 서로 다른 상위 요소 아래에 위치함).
p:nth-of-type(3) { background:#ff0; }
이 방법은 세 번째 p 요소가 지정되었는지 확인하려는 경우에 유용합니다. 처음에는 이것이 nth-child를 사용하는 것과 같은 효과가 있다고 생각할 수 있지만 nth-child(3)는 모든 하위 요소를 계산하므로 p의 모든 형제 요소가 p 요소가 아닌 한 결과가 다를 수 있습니다.
:n번째 유형 의사 클래스는 현재 브라우저에서 지원되지 않습니다.
:n번째 마지막 유형 의사 클래스
: n번째 마지막 유형 의사 클래스가 가리키는 요소 뒤에는 동일한 유형의 여러 요소가 있습니다. :nth-last-child 의사 클래스와 마찬가지로 마지막 하위 요소부터 거꾸로 계산됩니다. 다음 규칙은 두 번째 형제 요소 p와 일치합니다(참고: 동일한 수준의 형제이자 노드임).
p:nth-last-of-type(2) { background:#ff0 }
:nth-last-of-type()은 현재 브라우저에서 지원되지 않습니다.
:last-child 의사 클래스
:last 의사 클래스는 상위 요소의 마지막 하위 요소를 가리킵니다. :nth-last-child(1)과 같은 효과가 있습니다. 다음 규칙은 상위 요소의 마지막 하위 요소인 모든 p와 일치합니다.
p:last-child { background:#ff0 }
:last-childe pseudo-class는 다음과 같습니다. Mozilla 기반 브라우저에서 사용됩니다. Opera는 :last-childe 의사 클래스를 지원하지 않으며 Safri에는 버그가 있습니다(위 규칙은 모든 p 요소와 일치합니다). 놀랍게도 OmniWeb(베타 버전 5.1.1)에서는 이 브라우저가 Safari 기반임에도 불구하고 잘 작동합니다. 이는 Apple WebKit의 최신 버전이 반환되었기 때문일 수 있습니다. OmniWeb은 일반적으로 Safari보다 약간 낮은 버전의 WebKit을 사용하기 때문입니다.
: 최초 유형 의사 클래스
: 최초 유형 의사 클래스는 동일한 유형의 요소 중 첫 번째 요소를 가리킵니다. :nth-of-type(1)과 같습니다.
p:first-of-type { background:#ff0; }
:first-of-type 의사 클래스는 현재 브라우저에서 지원되지 않습니다.
:last-of-type 의사 클래스
:last-of-type 의사 클래스는 동일한 유형의 요소 중 마지막 요소를 가리킵니다. n번째 마지막 유형(1)과 동일합니다.
p:last-of-type { background:#ff0; }
:last-of-type 의사 클래스는 현재 브라우저에서 지원되지 않습니다.
:only-child 의사 클래스
:only-child 의사 클래스는 상위 요소에 다른 하위 요소가 없는 요소를 가리킵니다. :first-child:last-child 또는 :nth-child(1):nth-last-child(1) 와 동일합니다(후자는 전문적이지 않고 충분히 간결하지 않습니다).
p:only-child { backgound:#ff0; }
:only-childe 의사 클래스는 현재 Mozilla 기반 브라우저에서 사용할 수 있습니다. Safari에서는 다음과 같이 해석되는 것 같습니다: 첫 번째 자식(위 규칙은 문서의 모든 첫 번째 자식 요소 p와 일치합니다).
: 전용 유형 의사 클래스
: 전용 유형 의사 클래스는 더 이상 동일한 유형의 하위 요소가 없는 상위 요소를 가리킵니다. 이는 :first-of-type:last-of-type 또는 :nth-of-type(1):nth-last-of-type(1)과 같습니다(후자는 충분히 전문적이지 않습니다).
p:only-of-type { background:#ff0; }
:only-of-type 의사 클래스는 현재 브라우저에서 지원되지 않습니다.

[관련 권장 사항]

1. CSS3 무료 동영상 튜토리얼

20가지 공통 CSS/CSS3 속성 통합

3. 프롬프트 텍스트가 포함된 입력 상자를 만드는 h5 및 css3

4. 일반적으로 사용되는 여러 최신 CSS3 속성 공유

5. CSS를 사용하여 채팅 상자에 작고 날카로운 모서리와 거품 효과 만들기

위 내용은 CSS3의 선택기 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!