1. inline style
2. !important
3. id 선택자
4. class 선택자
5. tag 선택자
<div>
<p id="one" class="one-class">
111111
</p>
<p>
222222
</p>
<p>
333333
</p>
<p style="color : black; font-size:20px;">
444444
</p>
<p class="important-class">
important
</p>
</div>
// style
#one {
color : red;
}
.one-class {
color : blue;
}
p {
color : green;
}
p {
color : skyblue;
}
.important-class {
color : pink !important;
font-weight : 600;
}
.important-class {
color : hotpink;
font-weight : 500;
}
위와 같은 경우에는 어떻게 적용이 될까?
😅 저는 처음에 해당 요소에 중복이 되면 무조건 마지막에 적용된 style 또는 !important 키워드가 붙은 속성이 적용이 될거라 생각했는데 잘못 알고있었네요
style 정보를 불러와서 적용하는 순위다 😲
1. <head> 요소 안의 style 요소
2. <style> 요소안의 @import 문
3. <link> 요소로 연결된 CSS 파일
4. <link> 요소로 연결한 CSS 파일 안의 @import 문
5. 최종 사용자가 연결한 CSS 파일
6. 브라우저의 기본 스타일시트