2019/HTML & CSS

HTML CSS Selector

SOLYI 2019. 12. 4. 20:18

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{ }  :전체
{ }  :p 태그
 
 -자손선택자: 모든 하위요소에 스타일 적용
section p { color:blue; }
 
 -자식선택자: 바로 하위요소에 스타일 적용 ( > 사용 )
section > p { color:blue; }
 
 
인접 형제 선택자 : h1 다음에 있는 p태그
h1 + p{ background-color: lightyellow;} 
형제 선택자 : h1 바로 밑에 있는 p태그'들'
h1 ~ p{ border:1px solid silver; }
 
@ 하위 선택자
div.b  : div태그중 class="b"로 정의된 것 선택!
div.b{ background-color: lightyellow;}
 
div .b : div자손들중 class="b"로 정의된 것들을 선택! 
div .b{ background-color: lightcoral;}
 
div,.b : div거나 class-b인것들 선택
div,{color: aquamarine;}
 
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
반응형