HTML&CSS

CSS 선택자 // CSS selector

Linda~! 2020. 3. 5. 17:57

우선순위는 id > class > 태그선택자

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
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h3, li{color: indigo;} /*h3태그와 li태그*/
    ul strong{color: dodgerblue;} /*ul태그 하위태그중에 li태그*/
    div > div > strong {background-color: khaki;}/*div태그 하위태그 중에 div태그 하위태그인 */
    .main {background-color: lightblue;}
    #list {background-color: lightseagreen;}
    #list span {color:hotpink;}
    .warning {color: darkblue;}
    h3:first-letter{color:red;}
    /*:first-letter 는 가상 class입니다. / 태그 뒤에 . 나오면 클래스/태그 뒤에 : 나오면 가상클래스*/
    li:hover{background-color:lightpink;}
</style>
<body class="main">
    <h3>Web Programming</h3>
    <hr>
    <div> 
        <div>2학기 <strong>학습 내용</strong>입니다.</div>
        <ul id="list">
             <li><span>HTML5</span></li>
            <li><strong>CSS</strong></li>
            <li>JAVASCRIPT</li>
        </ul>
        <div class="warning">60점 이하는 F</div>
    </div>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs