CSS3에서 일반적으로 사용되는 여러 선택기

1990년대 초 HTML이 탄생한 후 1996년 말에 CSS가 탄생했습니다. CSS는 웹 페이지의 기본 속성을 정의하기 위해 특별히 설계되었습니다. 그러면 CSS3에서 일반적으로 사용되는 선택자는 무엇입니까? 오늘은 그 내용을 소개해드리겠습니다.

HTML의 탄생 1990년대 초반

1996년 말 첫 번째 CSS 버전 탄생

1998년 5월 CSS2 정식 출시

2004 CSS2.1 출시

CSS3 출시 2002 2003 2004 2005 2007 2009 2010

모듈식 개발

CSS1은 웹 페이지의 기본 속성을 정의합니다:

글꼴, 색상, 기본 선택기 등.

CSS2는 CSS1을 기반으로 하는 고급 기능을 추가합니다.

부동 및 위치 지정, 고급 선택기, (하위 선택자, 인접 선택자, 범용 선택자)

CSS3는 모듈식 개발을 따릅니다. 출시 시기는 특정 시점이 아니라 일정 기간입니다.

범용 선택자: * 모든 요소 선택

하위 요소 선택: > 요소의 직계 후손 선택

인접 형제 선택자 : + 대상 요소 바로 뒤의 첫 번째 요소 선택

器 일반 형제 선택 장치: ~ 선택 모든 형제 요소 뒤에는 NTH-Child가 지정된 인덱스에서 하위 요소를 선택합니다.

n번째-child(n) 상위 요소 아래의 n번째 요소

NTH- Child(ODD) 이상한 숫자 요소

NTH- 하위(EVEN) 최적 하위 유형

: NTH-Last-Child(N) Nita 요소

: NTH-OF-TYPE(N) Father 요소 No. 1 지정된 유형의 n 하위 요소

:nth-last- of-type 상위 요소 아래에서 지정된 유형의 n번째 하위 요소

:first-child 상위 요소 아래의 첫 번째 하위 요소 선택

:last -child 상위 요소 아래의 마지막 하위 요소 선택

:only-child는 상위 요소 아래의 유일한 하위 요소를 선택합니다

:only-of-type은 상위 요소 아래에서 지정된 유형의 유일한 하위 요소를 선택합니다

:root는 문서 루트 디렉터리를 선택하고 html

E[를 반환합니다. attr] 속성 이름, 특정 속성 값이 확실하지 않습니다

E[attr="value"] 속성 이름을 지정하고 해당 속성 값을 지정합니다.

E[attr ~="value"] 속성 이름을 지정합니다. 공백으로 구분된 여러 속성 값이 있고

E[attr ^= "value"] 값을 포함합니다. 속성 이름을 지정하고 속성 값은

E[attr $="value"] 값으로 시작합니다. 속성을 지정합니다. 이름, 속성 값은 value

E로 끝납니다.[attr *="value"]는 속성 이름을 지정하고, 속성 값은 value

E[attr |= "value"]를 지정하고, 속성 값은 끝납니다. with value-

UI 의사 클래스 선택기

로 시작:

:enabled 활성화된 상태 요소 선택 :disabled 비활성화된 상태 요소 선택

:checked 선택한 입력 요소 선택(라디오 버튼 또는 확인란)

:default 기본 요소 선택

:유효, 무효 입력 유효성 검사에 따라 유효하거나 유효하지 않은 입력 요소 선택

:in-range, out-of-range 지정된 범위 내 또는 외부에서 제한된 요소 선택

: 재구매, 선택 사항 기반 on 입력 요소를 선택하기 위해 :required 속성을 허용할지 여부

동적 가상 클래스 선택기

:

:link 링크 요소 선택 :visited 사용자가 액세스할 수 있는 요소 선택

:hover 마우스가 떠 있는 요소

:active 마우스 클릭 시 트리거되는 이벤트

:focus 현재 포커스를 받는 요소

기타 의사 클래스 선택자:

:not() 대괄호 안의 선택기 선택을 무효화합니다.

:lang( < ;대상 언어>) lang

global 속성을 기반으로 한 요소

:target URL 조각 식별자가 가리키는 요소 :empty는 내용이 비어 있는 요소를 선택합니다.

:selection 마우스 커서가 요소 내용을 선택합니다

CSS3 선택 정보 도구에 대한 내용은 여기까지입니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

CSS3에는 어떤 새로운 배경 속성이 있습니까

CSS3 미디어 쿼리를 사용하는 방법

CSS3에서 유연한 상자를 만드는 방법

위 내용은 CSS3에서 일반적으로 사용되는 여러 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!