CSS 기본 CSS 선택기_기본 튜토리얼

예:

*[lang=fr] { 글꼴 크기:14px; 너비:120px }

*.div { 텍스트 장식:없음 }


2. 유형 선택기
구문:

E { sRules }

설명:
유형 선택기. 문서 언어 개체(요소) 유형을 선택기로 사용합니다.
예:

td { 글꼴 크기:14px; 너비:120px; }

a { text-장식:none }

3. 🎜>구문:

E [ attr ] { sRules }

E [ attr = 값 ] { sRules }

E [ attr ~= 값 ] { sRules }

E [ attr |= value ] { sRules }

설명:
속성 선택기.
attr 속성이 있는 E를 선택하세요.
attr 속성이 있고 속성 값이 value와 같은 E를 선택하세요.
attr 속성이 있는 E를 선택하세요. 속성 값은 공백으로 구분된 단어 목록이며, 그 중 하나는 value와 같습니다. 여기의 값은 공백을 포함할 수 없습니다.
attr 속성을 선택하면 속성 값은 값 E로 시작하는 하이픈으로 구분된 단어 목록입니다.
예:

h[title] { color: blue; }

/* 제목 속성이 있는 모든 h 객체 */



span[class=demo] { color: red }



div[speed="fast"][dorun="no"] { color: red }



a[rel~="copyright"] { color :black; }

4. 선택기를 포함합니다.
구문:

E1 E2 { sRules }


설명:
에 선택기가 포함됩니다. E1 에 포함된 모든 E2를 선택합니다. 즉, E1.contains(E2)==true입니다.
예:

테이블 td { 글꼴 크기:14px }



div.sub a { 글꼴 크기:14px }

5. 하위 개체 선택기
구문:

E1 > E2 { sRules }

설명:
하위 개체 선택기. E1 의 하위인 E2를 모두 선택합니다.
예:

body > p { 글꼴 크기:14px; }

/* body의 하위 개체인 모든 p 개체의 글꼴 크기는 14px입니다. */



div ul>li p { 글꼴 크기:14px }

6.ID 선택기
구문:

#ID { sRules }


설명:
ID 선택자. 문서 트리(DOM)에서 개체의 고유 식별자인 ID를 선택기로 사용합니다.
예:

#note {font-size:14px; width:120px;}

7. 클래스 선택기
구문:

E.className sRules }

설명:
클래스 선택기입니다. 이 선택기는 HTML에서 사용할 수 있습니다. 그 효과는 E [ class ~= className ]과 동일합니다. 속성 선택기를 참조하세요.
IE5+에서는 공백으로 구분된 스타일 시트 클래스 이름 집합을 지정하여 객체의 클래스 속성(속성)에 대해 둘 이상의 값( className )을 지정할 수 있습니다. 예:
.

예:

div.note { 글꼴 크기:14px; }

/* 클래스 속성 값이 "note"와 같은(포함) 모든 div 개체의 글꼴 크기 14px */



.dream {font-size:14px; }

/* 클래스 속성 값이 다음과 같은 모든 객체의 글꼴 크기(포함) "note"는 14px입니다. */


8. 선택기 그룹화
구문:

E1 , E2 , E3 { sRules }

설명:
선택기 그룹화. 여러 선택기에 동일한 정의를 적용하려면 선택기를 쉼표로 구분된 그룹으로 결합하면 됩니다.
예:

.td1,div a,body { 글꼴 크기:14px; }

td,div,a { 글꼴 크기:14px }


9. 의사 클래스 및 의사 객체 선택기

구문:

E : 의사 클래스 { sRules }

E : 의사 요소 { sRules }

설명:
의사 클래스 및 의사 개체 선택기.
의사 클래스 선택자. 의사 클래스[:link :hover :active :visited :focus :first-child :first :left :right :lang]를 참조하세요.
의사 개체 선택기. 의사 요소[:first-letter:first-line:before:after]를 참조하세요.
예:

div:first-letter { 글꼴 크기:14px; }

a.fly:hover { 글꼴 크기:14px }