적용우선순위(cascading)
CSS = Cascading Style Sheet
상황: 하나의 태그에 여러 디자인이 적용되었을 경우
<!DOCTYPE html>
<html>
<head>
<style>
li{color:red;}
#idsel{color:blue;}
.classel{color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel"
style="color:powderblue;">css</li>
<li>javascript</li>
</ul>
</body>
</html>
style -> id선택자 -> class선택자 ->tag 순으로 우선순위 적용됨을 확인할 수 있다.
<!-- 즉 우선순위는 다음과 같다 -->
<li>style attribute</li>
<li>id selector</li>
<li>class selector</li>
<li>tag selector</li>
하지만 어떤선택자를 사용하든 우선순위를 가져갈 수 있는 방법이 있다.
!important 를 뒤에 붙이기
li{color:red; !important}
li는 가장 낮은 우선순위를 갖고있지만, 끝에 !important를 붙여주면 가장 우선순위를 가져간다.
가보자고?