CSS 작성방법2

다중선택 

1. ,연산자 : 여러개 선택
2. 공백 연산자 : 자손들
3. > 연산자 : 자식들

, 연산자
#header01,#header03,#header05 {
color: red;
}
공백 연산자 : 자손 중에 선택
#d1 p {
background-color: lime;
}
> 연산자 : 직계 자식 중에 선택
#d2>p {
border: 1px solid red;
}

* {
border: 1px dotted purple;
padding: 15px;
margin: 10px;
}

복합적 선택조건

해당 조건을 동시에 갖춘 엘리먼트를 선택
h1.c2 {
color: gold;
}

h1.c1.c2 {
text-decoration: line-through;
}

의사(pheudo) 셀렉터 (셀렉터의 상태)

문법 -> 태그명:상태명
ex)
a:visited - 한 번 방문한 링크
a:hover - 링크에 마우스가 올라간 상태

h1.c2:hover {
background-color: black;
color: white;
}
/* CSS 스타일 상속 */
/* - 일부 스타일은 자식 엘리먼트로 상속된다. */
div:nth-child(2) {
color: red;
border: 3px solid blue;
}
/* 슈도 셀렉트의 경우는 그 아래에서 찾는것이 아니라 해당 엘리먼트 중에서 찾는다. */
p:FIRST-LETTER {
color: gold;
font-size: 50px;
}