>  기사  >  웹 프론트엔드  >  CSS3의 새로운 선택자는 무엇입니까?

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

青灯夜游
青灯夜游원래의
2021-04-08 19:10:064166검색

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

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

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.