다양한 CSS 선택기에 대한 자세한 소개

1. 기본 선택기

1. * 범용 요소 선택기, 모든 요소와 일치

2. E 태그 선택기, E 태그

를 사용하여 모든 요소와 일치. 클래스 속성에 정보가 포함되어 있음

4. id 속성이 footer와 동일한 모든 요소와 일치

2. 다중 요소 조합 선택기

5. , 모든

E 요소 또는 F 요소와 동시에 일치하며 E와 F는 쉼표로 구분됩니다.

6. E F Descendant 요소 선택기, E와 F 사이에서

E 요소의 하위인 모든 F 요소와 일치합니다. 공백

7. E > F 하위 요소 선택자는

E 요소

8의 모든 하위 요소 F와 일치합니다. E + F 인접 요소 선택자는

E 요소 F

바로 뒤에 있는 모든 형제 요소와 일치합니다.

3.

CSS 2.1 속성 선택기

9. E[att] 는 값에 관계없이 모든 E 요소를

att 속성과 일치시킵니다. (참고: 여기서는 "[cheacked]"와 같이 E를 생략할 수 있습니다. 아래와 동일합니다.)

10.E[att=val]

att 속성이 "val"과 동일한 모든 E 요소와 일치합니다.

11. E[ att~=val]

att 속성에 공백으로 구분된 여러 값이 있는 모든 E 요소와 일치하며 그 중 하나는 "val"과 동일합니다.

12 E[att|=val] 모든

att와 일치합니다. 여러 개의 연속된 값을 갖는 속성 하이픈으로 구분된 값, 값 중 하나가 "val"로 시작하는 E 요소는 "en", "en-us", "en-gb"와 같은 lang 속성에 주로 사용됩니다.

IV.

CSS 2.1

13의 의사 클래스 E:first-child 는 상위 요소의 첫 번째 하위 요소와 일치합니다

14. 클릭되지 않았습니다

15. E:visited 클릭한 모든 링크와 일치합니다

16. E:active 는 마우스를 눌렀지만 놓이지 않은 E 요소와 일치합니다

17. E 요소

18에 대한 마우스와 일치합니다. E:focus

는 현재 포커스19가 있는

E 요소와 일치합니다. E:lang(c)

는 lang 속성이 c와 동일한 E 요소와 일치합니다.

5.

20의 CSS 2.1 의사 요소. E:첫 번째 줄

은

E 요소21의 첫 번째 줄과 일치합니다. E:첫 글자

는

E 요소의 첫 번째 문자와 일치합니다. 22. E:before

in

E 요소 앞에 생성된 콘텐츠를 삽입합니다. 23. E:after

생성된 콘텐츠를

E 요소 뒤에 삽입합니다.

6. 형제 요소에 대한 CSS 3 범용 선택기

24. E ~ F

E 요소 뒤에 있는 모든 형제 F 요소와 일치

7. CSS 3 속성 선택기

25. E[att^="val"]

Attribute

att 요소 "val" 26. E[att$="val"]

Attribute

att의 값은 "val"로 끝납니다. 27 E[att*="val"]

Attribute

att의 값에는 "val"이 포함됩니다. 문자 문자열 요소

8.

CSS 3 28의 사용자 인터페이스와 관련된 의사 클래스 E:enabled

는 양식의 활성화된 요소와 일치합니다

29 E:disabled 는 양식의 비활성화된 요소와 일치합니다.

30. E:checked 는 양식

31에서 선택한

라디오(라디오 상자) 또는 체크박스(체크박스) 요소와 일치합니다. E::selection 는 사용자가 현재 선택한 요소와 일치합니다

9 상위 요소의 번째 하위 요소인 첫 번째 숫자는 1

34입니다. E:nth-last-child(n)

는 상위 요소의 마지막 n번째 하위 요소와 일치하며, 첫 번째 숫자는 1

35. E:nth-of-type(n)

:nth-child()와 유사하지만 동일한 태그를 사용하는 요소만 일치합니다

36.

:nth-last-child()와 유사하지만 동일한 태그

37을 사용하는 요소만 일치합니다. E:last-child

는 상위 요소의 마지막 하위 요소와 일치하며 이는 :nth-last와 동일합니다. -child (1)

38. E:first-of-type

은 상위 요소 아래에서 동일한 태그를 사용하는 첫 번째 하위 요소와 일치합니다. 이는 :nth-of-type(1)

39와 동일합니다. :last-of-type

은 상위 요소 아래의 동일한 태그를 사용하여 마지막 하위 요소와 일치합니다. 이는 :nth-last-of-type(1)

40과 동일합니다. E:only-child

는 only와 일치합니다. 상위 요소 Child 요소 아래에 하나, :first-child:last-child 또는:nth-child(1):nth-last-child(1)

41과 동일 E:only-of-type

을 사용하세요. 일치하는 상위 요소 아래의 동일한 유형 태그의 유일한 하위 요소, :first-of-type:last-of-type 또는:nth-of-type(1):nth-last-of-type(1과 동일) )

42. E: 비어 있음

하위 요소를 포함하지 않는 요소와 일치합니다. 텍스트 노드도 하위 요소로 간주됩니다.

10.

CSS 3 선택 방지 의사 클래스 43. E: 아님

일치 항목이 현재 선택기의 모든 요소와 일치하지 않습니다

11. :target pseudo-class in

CSS 3 44 E:target

은 a를 클릭한 후 효과와 일치합니다. 문서

의 특정 "id"

위 내용은 다양한 CSS 선택기에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!