집 > 기사 > 웹 프론트엔드 > CSS3의 선택기 구문은 무엇입니까?

CSS3의 선택기 구문은 무엇입니까?

오늘은 CSS3에서 흔히 사용되는 선택자 구문을 소개하겠습니다. 구문은 크게 기본 선택자 구문, 계층적 선택자 구문, 동적 의사 클래스 선택자 구문의 세 가지로 구분됩니다. 아래에서 자세한 설명을 드리겠습니다.

1. 기본 선택기 구문

(1)* 와일드카드 선택기 문서의 모든 HTML 요소를 선택합니다.

(2)E 요소 선택기 HTML 요소의 지정된 유형을 선택합니다.

#id ID 선택기 지정된 Any 유형을 선택합니다. ID 속성 값이 "id"인 요소

.class 클래스 선택기 지정된 클래스 속성 값 "class"를 사용하여 모든 유형의 여러 요소를 선택합니다.

selector1, selectorN 그룹 선택기 각 선택기와 일치 요소 세트 병합

2, 계층적 선택기 구문

(1)E F descendant 선택기 (선택기 포함) 일치하는 F 요소를 선택하고 일치하는 F 요소는 일치하는 E 요소에 포함됩니다.

( 2)E>F 하위 선택기는 일치하는 F를 선택합니다. 일치하는 F 요소는 E 요소의 하위 요소와 일치합니다

(3)E+F 인접 형제 선택기 일치하는 F 요소를 선택하고 일치합니다. F 요소는 일치하는 E 요소

( 4)E~F범용 선택기일치하는 F 요소와 일치하는 E 요소 뒤에 있는 모든 일치하는 F 요소를 선택합니다

3, 동적 의사 클래스 선택기 구문

(1)E:link 링크 의사 클래스 선택기는 일치하는 E 요소를 선택하고 일치하는 요소는 하이퍼링크로 정의되어 방문되지 않았습니다. 링크 설명 포인트에 흔히 사용됨

(2)E:visited 링크 의사 클래스 선택기는 일치하는 E 요소를 선택하고 일치하는 요소는 하이퍼링크로 정의되어 방문되었습니다. 링크 그리기 포인트에서 자주 사용됩니다

(3)E:active 사용자 동작 선택기는 일치하는 E 요소를 선택하고 일치하는 요소가 활성화됩니다. 링크 스트로크 및 버튼에 일반적으로 사용됩니다.

(4)E:hover 사용자 동작 선택기 일치하는 E 요소를 선택하고 사용자의 마우스는 요소 E에 유지됩니다. IE6 이하 브라우저는 a:hover

(5)E:focus만 지원합니다. 사용자 동작 선택기 일치하는 E 요소를 선택하면 일치하는 요소가 포커스를 받습니다

위의 소개를 읽은 후 방법을 마스터했다고 믿습니다. and more 정말 흥미롭습니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!