반응형
<!DOCTYPE html>
<html>
<head>
<style>
li{color:red !important;} /*!important를 사용하면 가장 우선된다.*/
/*#idsel{color:blue;}*/ /*태그 선택자보다는 id선택자가 우선권을 지닌다.*/
/*#idsel{color:yellow;}*/ /*앞선 idsel 선택자보다 후에 나온 idsel 선택자가 우선권을 지닌다.*/
.classsel{color:green;} /*class보다는 id가 우선권을 지닌다.*/
/*종합해보면, id선택자 > class선택자 > 태그 선택자가 된다.*/
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel">css</li>
<li>javascript</li>
</ul>
<ol>
<li>style attribute</li>
<li>id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>
</html>반응형
'WEB > CSS' 카테고리의 다른 글
| box-sizing (0) | 2024.02.19 |
|---|---|
| 인라인 vs 블럭레밸 (0) | 2024.02.19 |
| 상속 (0) | 2024.02.19 |
| 웹폰트 (0) | 2024.02.16 |
| font (0) | 2024.02.16 |