<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/selector6.css"
<title>06_선택자 우선순위</title>
</head>
<body>
<h1>CSS 선택자의 우선 순위</h1>
<pre>
기본적으로 css속성은 style태그 또는 css파일에
작성된 순서(위 -> 아래)대로 해석이 진행되지만
같은 요소에 여러 css 속성이 설정되는 경우, 우선순위가 적용된다.
* 알아둬야 할 것!
1) 동일한 우선 순위로 css 속성이 설정된 경우
-> 제일 마지막에 작성된 css속성이 반영된다.
2) 여러 선택자를 이용해서 같은 요소를 선택하더라도
지정된 css 속성이 다르면
모두 반영된다.
1순위 : css속성 : 속성값 !important;
2순위 : inline-style속성 (요소에 직접 작성되는 style 속성)
3순위 : 아이디 선택자(#아이디 속성명)
4순위 : 클래스 선택자(.class 속성명)
5순위 : 태그 선택자(태그명)
</pre>
<!-- 2순위 : inline-style -->
<div class="cls1" id="test1" style="background-color: pink;">우선순위 리스트</div>
</body>
</html>
ha lee :)