*: 범용 요소 선택기
* { 여백: 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实例：
선택자 #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를 사용하여 일치해야 하는 태그를 빠르게 선택할 수 있습니다.
