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 중국어 웹사이트의 기타 관련 기사를 참조하세요!