CSS3의 새로운 선택자는 무엇입니까?

css3 선택기에는 "[att^="val"]", "[att$="val"]", "[att*="val"]", ":root", ":nth-child"가 포함됩니다. (n)", ":last-child", ":only-child", ":empty" 등

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 새로운 선택기

속성 선택기 (IE6을 제외한 대부분의 브라우저에서 지원)

E[att^="val"] att 속성의 값은 " val로 시작하는 요소 "

E[att$="val"] att 속성의 값은 "val" 요소로 끝납니다.

E[att*="val"] 속성 att 값에 다음이 포함된 요소 문자열 "val"

Instance: p[id^="nav"] {Background:#000;}

struct 의사 클래스 선택기 (필터 선택기)

(참고: FireFox 1.5/2.0/3.0은 E:root를 지원하고, FireFox 3.0은 E:last-child, E:empty를 지원합니다. IE6/7/8은 지원하지 않기 때문에 적절한 장면을 선택하세요. 그리고 사용해 보세요)

입니다.

일련 번호	Selector	Meaning	Instance
1	E:root	는 문서의 루트 요소와 일치합니다. HTML 문서의 경우 HTML 요소
2	E :nth-child(n)	는 상위 요소의 n번째 하위 요소와 일치하며 첫 번째 숫자는 1	p:nth-child(3) { color:#f00 }
3입니다.	E :nth-last-child(n)	는 상위 요소의 마지막 n번째 하위 요소와 일치합니다. 첫 번째 숫자는 1	p:last-child { background:#ff0 }
4	E :nth-of-type(n)	:nth-child()와 유사하지만 동일한 태그를 사용하는 요소만 일치합니다	p:nth-of-type(2){color:red;}상위 요소의 n번째 하위 요소 p를 선택합니다
5	E:nth-last-of-type(n)	은 :nth-last-child()와 유사하지만 동일한 것을 사용하는 요소에만 일치합니다. 태그 요소
6	E:last-child	는 상위 요소의 마지막 하위 요소와 일치하며, 이는 다음과 같습니다:nth-last-child(1)
7	E:first-of-type	은 상위 요소 아래 동일한 태그를 사용하는 첫 번째 하위 요소와 일치합니다. 이는 nth-of-type(1)
8	E:last-of와 동일합니다. -type	match 상위 요소 아래에서 동일한 태그를 사용하는 마지막 하위 요소는 다음과 같습니다. nth-last-of-type(1)
9	E:only-child	은 다음과 동일합니다. 상위 요소 Child 요소 아래에 하나, 다음과 동일: first-child:last-child 또는:nth-child(1):nth-last-child(1)	p:only-child { background:#ff0 }
10	E:only-of-type	은 상위 요소 아래에서 동일한 태그를 사용하는 유일한 하위 요소와 일치합니다. 이는:first-of-type:last-of-type 또는:nth-of와 동일합니다. -type(1):nth -last-of-type(1)
11	E:empty	은 하위 요소가 포함되지 않은 요소와 일치합니다. 텍스트 노드도 하위 요소로 간주됩니다.	p:비어 있음 { 배경 :#ff0 }

UI 상태 의사 클래스 선택기(IE6/7/8에서는 지원되지 않음)

일련 번호	selector	meaning	instance
1	E: 활성화됨		형식으로 활성화된 요소 일치
2	E: 비활성화됨	형식으로 비활성화된 요소 일치	input[type="text"]:disabled { background:#ddd }
3	E:checked	양식에서 선택한 라디오(라디오 버튼) 또는 체크박스(체크박스) 요소와 일치합니다
4	E::selection	은 사용자가 현재 선택한 요소와 일치합니다.

레벨 요소 범용 선택기

일련 번호	selector	meaning	instance
1	E ~ F	E 뒤의 동일한 문자와 일치합니다. 요소 레벨 F 요소	p ~ ul { background:#ff0 }

역 선택 의사 클래스

일련 번호	selector	meaning	instance
1	E:not(s)	일치하지 않는 것을 모두 일치시키세요 현재 선택기 요소	:not(p) { border:1px solid #ccc }

: 대상 의사 클래스

일련번호	Selector	의미	예
1	E:target	일치하는 문서에서 특정 "id"를 클릭한 후의 효과

(학습 영상 공유: css 동영상 튜토리얼 )

위 내용은 CSS3의 새로운 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!