선택자정리

/* 모든 h1태그 */  
h1{
    color: orange;
}

/* 'important'라는 클래스를 갖고 있는 모든 태그  */
.important {
    color: orange;
}

/* 'favorite'라는 아이디를 갖고 있는 태그 */  
#favorite {
    color:blue;
}


자식 (children)
/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div i{
    color:orange;
}

직속 자식 (direct children)

/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i{
    color:orange;
}

복수 선택
/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
    color: orange;
}

여러 조건  
/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
    color:blue;
}   
/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two{
    color:orange;
}

Pseudo-class (가상 클래스)
콜론(:)을 사용하면 몇 가지 '가상 클래스'를 선택할 수 있습니다.

n번째 자식
/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
    color:blue;
}   

/* .div1의 자식인 <p> 태그 중 첫 번째 */  
.div1 p:first-child {
    color:red;
}

/* .div1의 자식인 <p> 태그 중 마지막  */
.div1 p:last-child {
    color: green;
}

마우스 오버 (hover)
h1:hover{
    color:green;
}