요소 선택기

html{color:black;}
h2{color:gray;}
h1{color:silver;}

조를 나누다
선택기 그룹
나누다

h2, p{color:gray;}

일반 선택기
*

*{color:red;}

클래스 선택기 및 ID 선택기
클래스 선택기.  

다중 클래스 선택기:
css 순서는 마음대로 쓸 수 있습니다

일치:

p.urgent.warning{background: #CCC;}
      
      

ID 선택기 번호

#title{font-size: 40px;}
      

ID 선택기의 ID는 한 번만 나타날 수 있습니다.
속성 선택기
단순 속성 선택기는 속성의 값이 무엇이든지 상관없이 어떤 속성이 있는 요소를 선택하기를 원합니다.간단한 속성 선택기를 사용할 수 있습니다

h1[class]{color:green;}
         

h1에class 속성이 있는데 모두color가green인 css 속성을 추가합니다.
예: img의alt 속성에 css 속성 추가

img[alt]{border:3px solid #CCC;}

여러 속성을 함께 사용할 수 있습니다.

a[href][title]{font-weight:blod;}

특정 속성 값에 따라 [속성 = 속성 값] 선택

a[title="t1"]{font-size:12px;}
a[title="t1"][href="http://www.xxx.xx"]{font-size:20px;}

a[class="h1 title"]{color:green;}

a[class="h1 title"]{color:green;} 이 순서가 바로 H1 타이틀 순서입니다. 마음대로 하시면 안 됩니다.
부분 속성 값에 따라 ~ 반전 기호 선택 ~ 일치하는 것은 공백으로 구분된 속성 값
다음은 타이틀이 있는class와 일치합니다

h1[class~="title"]{color:yellow;}
         

하위 문자열 일치 선택기

[foo^="bar"]     foo  bar  
[foo$="bar"]     foo  bar  
[foo*="bar"]     foo  bar

특정 속성 선택 유형

h1[class|="nav"]{color:red;}
         
         
         
         ， |   nav-   

후대 선택기
빈칸을 쓰다

h1 em{color:red;}
p b,blockguote b{color:red;}
                 ， p      b  ，  b       

하위 요소 선택 > 예컨대: h1원소 하위 요소 (후대 요소가 아닌) 의strong원소 선택

h1>strong{color:red;}

인접 형제 요소 + h1 옆에 있는 p의 글꼴 색상을 선택합니다.

h1+p{color: #CCC;}

html > body table + ul{margin-top:1.5em;}

한 테이블 요소에 이어 나타나는 모든 l 요소를 선택하고 이 테이블 요소는 한 바디 요소에 포함되며 바디 요소 자체는 html 요소의 하위 요소이다.
위류와 위원소
위조 클래스 선택기:

a:link{color:black;}
a:visited{color:green;}

위류 동태
앞의 두 개는 정적이고, 뒤의 세 개는 동태이며, 위류의 순서가 매우 중요하다.

a:link{color:black;}
a:visited{color:green;}
a:focus{color: red;}
a:hover{color:yellow;}
a:active{color: pink;}

순서:
link-visited-focus-hover-active 동적 위조 클래스는 모든 요소에 적용할 수 있습니다
예를 들어, 바디의 모든 하위 요소 마우스가 떠 있을 때 노란색 배경을 설정합니다.

body *:hover {background:yellow;}

첫 번째 하위 요소 선택 first-child
정적 위조:first-child: 첫 번째 하위 요소를 선택하는 데 사용

    
   P
    

        
1
        
2
        
3
    
    

        
h1
        
p1
        
p2
        
p3
    

이div의 첫 번째 하위 요소는 다음과 같습니다: p (div 첫 번째) 리 (ul 첫 번째) h1 (div 첫 번째)
다음과 같습니다.

li:first-child {
    color: red;
}

p:first-child {
    color: green;
}

h1:first-child {
    color: green;
}


    
div       P
    

        
ul       
        
2
        
3
    
    

        
div       
        
p1
        
p2
        
p3
    

언어 선택에 따라lang()은 |=과 같습니다.

*:lang(fr) {font-style:italic;}
  fn fn-

위조 결합
서로 배척하는 위류를 한데 결합시키지 마라!!!

a:link:hover{color:red;}
a:visited:hover{color:yellow;}
//                 
a:link:hover:lang(de){color:gray;}
a:visited:hover:lang(de){color:red;}

위원소 선택기
CSS2.1 4개의 위조 요소를 정의했다: 알파벳 스타일 설정, 첫 줄 스타일 설정, 설정 전과 설정 후 요소의 스타일
1. 알파벳 스타일 설정: first-letter

p:first-letter{font-size:40px;color:red;}
            first-letter

2.첫 번째 행 스타일을 설정하려면:
first-line

p:first-line{font-size:40px;color:red;}
first-line
           

CSS2 first-letter 및 first-line의 제한: 태그와 단락 같은 블록 요소에만 적용되며 하이퍼링크 등 줄 내 요소에는 적용되지 않습니다
3. 이전 및 다음 요소의 스타일 설정:before:after
각 h2 요소 앞에 빨간색 중괄호 한 쌍을 넣다

h2:before{content:"[]";color:red;}
before  1
before  2

h2마다 end 삽입

h2:after{content:"end";color:red;}
after  1
after  2