CSS3에서 일반적으로 사용되는 최신 30개 선택자 요약(초보자에게 적합)

 1、

*: 범용 요소 선택기

* { 여백: 0; 패딩: }

* 선택자는 페이지의 모든 요소를 ​​선택합니다. 위 코드는 모든 요소의 여백과 패딩을 0으로 설정하는 것입니다. 가장 기본적인 방법은 기본 CSS 스타일을 지우는 것입니다.

* 선택자는 다음 코드와 같이 하위 선택자에도 적용될 수 있습니다.

#container * { 테두리: 1px 단색 검정 }

이런 방식으로 ID 컨테이너가 있는 모든 하위 태그 요소가 선택되고 테두리가 설정됩니다.

2

#ID: ID 선택기

#container { 너비: 960px; 여백: 자동 }

ID 선택자는 CSS에서 가장 효율적인 선택자이므로 사용 시 ID의 고유성이 보장되어야 합니다.

3

.class: 클래스 선택기

.error { 색상: 빨간색 }

클래스 선택자는 ID 선택자보다 효율성이 떨어집니다. 페이지에는 여러 클래스가 있을 수 있으며 클래스는 다른 태그에서 사용될 수 있습니다.

4

X Y: 태그 조합 선택기

li a { 텍스트 장식: 없음 }

태그 조합 선택자 역시 흔히 사용되는 선택자입니다.

5

X: 태그 선택기

a { 색상: 빨간색; } ul { 여백-왼쪽: }

페이지에 있는 특정 태그의 스타일만 변경하려는 경우 태그 선택기를 사용하도록 선택할 수 있습니다.

6

X:방문 및 X:링크

a:link { 색상: 빨간색; } a:visted { 색상: 보라색 }

의사 클래스 선택자, 가장 일반적으로 사용되는 것은 A 태그

7

X + Y：毗邻元素选择器

 

ul + p { color: red; }

毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y

 

8

 

X > Y：子元素选择器

 

div#container > ul { border: 1px solid black; }

匹配#container下的所有子元素。

关于X>Y和X Y的区别请看下面的html实例：

 

• List Item
  • Child
• List Item
• List Item
• List Item

선택자 #container > ul은 li의 ul이 아닌 #container의 하위 요소인 첫 번째 UL과만 일치하지만 div ul은 모든 DIV의 ul과 일치할 수 있습니다.

9

X~Y：

ul ~ p { 색상: 빨간색 }

X 요소 다음의 형제 P 요소와 일치합니다. 즉, UL 이후 동일한 레벨의 요소가 모두 선택됩니다.

10

X[제목]: 속성 선택기

a[제목] { 색상: 녹색 }

은 태그를 특정 속성과 일치시킵니다. 예를 들어, 이 예에서는 제목 속성과 태그를 일치시킵니다.

11

X[href="foo"]

a[href="http://js8.in"] { color: #1f6053 /* nettuts green */ }

도 속성 선택기에 속하며, 태그를 속성의 특정 값과 일치시킵니다. 예를 들어, 예제에서 href="http://js8.in"과 일치하는 a 태그는 선택되지 않았지만 다른 링크의 a 태그는 선택되지 않았습니다.

12

X[href*="nettuts"]

a[href*="tuts"] { color: #1f6053 /* nettuts green */ }

은 속성 선택기에 속하며 href에 tuts가 포함된 모든 태그와 일치합니다. 정기매칭

13

X[href^="http"]

a[href^="http"] { 배경: url(path/to/external/icon.png) no-repeat-left: 10px }

은 위의 별자리 선택 태그와 유사하지만 http로 시작하는 A 태그, 일반 매칭

과 일치합니다.

14

X[href$=".jpg"]

a[href$=".jpg"] { 색상: 빨간색 }

속성에서 .jpg로 끝나는 태그와 일치하며, 일반 일치도 있으며 속성 선택기 유형이기도 합니다.

15

X[data-*="foo"]

모든 이미지 링크를 일치시키려면 다음 CSS를 사용하면 됩니다.

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { 색상: 빨간색 }

그러나 a 태그에 data-filetype 속성을 추가하면 다음 CSS를 사용하여 일치해야 하는 태그를 빠르게 선택할 수 있습니다.

이미지 링크 ;a[data-filetype="image"] { 색상: 빨간색 }

16

X[foo~="bar"]

a[data-info~="external"] { 색상: 빨간색 } a[data-info~="image"] { 테두리: 1px 단색 검정색;

다음 예와 같이 속성에서 공백으로 구분된 여러 값 중 하나가 "bar"인 X 요소와 일치합니다.

17

X:선택함

입력[type=radio]:checked { 테두리: 1px 단색 검정 }

이 선택자는 주로 체크박스에 사용됩니다. 현재 선택된 태그로 체크박스를 선택하세요.

18

X:이후

.clearfix:after { 내용: ""; 표시: 모두; 숨김; 높이: 0; : 1% }

선택한 태그 앞이나 뒤에 내용을 삽입하기 전과 후 일반적으로 부동 소수점을 지우는 데 사용되지만 IE6 및 IE7에서는 사용할 수 없습니다.

19

X:호버

div:hover { 배경: #e3e3e3 }

가장 일반적으로 사용되는 태그는 A 태그인데, IE6 브라우저에서는 A 태그를 제외한 다른 태그 div:hover가 일치하지 않습니다.

20

X:not(선택기)

*:not(p) { 색상: 녹색 }

() 안의 선택자를 제외한 레이블 요소를 선택합니다.

21

X::의사요소

p::first-line { 글꼴 크기: 굵게: 1.2em; } p::first-letter { float: 왼쪽; 글꼴 크기: 굵게; 글꼴 계열: 필기체; 오른쪽 패딩: }

은 각각 요소의 첫 번째 줄과 첫 문자를 일치시키는 데 사용됩니다. 예 보기:

22

X:n번째-자식(n)

li:nth-child(3) { 색상: 빨간색 }

X 요소의 처음 몇 개의 태그와 일치합니다. 예를 들어 위 코드는 세 번째 li 태그와 일치합니다.

23

X:n번째-마지막-자식(n)

li:nth-last-child(2) { 색상: 빨간색 }

이전 선택기와 달리 이 선택기는 태그를 역순으로 일치시킵니다. 위 코드는 두 번째 li 태그와 일치한다는 의미입니다.

24

X:n번째 유형(n)

ul:nth-of-type(3) { 테두리: 1px 단색 검정 }

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

25

X:n번째 마지막 유형(n)

ul:nth-last-of-type(3) { 테두리: 1px 단색 검정색 }

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

26

X:첫째

ul li:first-child { border-top: 없음 }

은 상위 요소의 n번째 하위 요소와 일치하며 첫 번째 요소의 번호는 1입니다

27

X:막내자식

ul > li:last-child { 색상: 녹색 }

은 상위 요소의 마지막 n번째 하위 요소와 일치하며 첫 번째 요소의 번호는 1입니다

28

X:외동자녀

div p:only-child { 색상: 빨간색 }

은 상위 요소 아래의 유일한 하위 요소와 일치하며, 이는 first-child:last-child 또는 :nth-child(1):nth-last-child(1)

29

X:전용 유형

li:only-of-type { 글꼴 두께: 굵은 글씨 }

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

30

X:최초형

li:only-of-type { 글꼴 두께: 굵게 }

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