CSS (2) 우선순위

1순위. 가장 마지막에 작성한 스타일

p{color:red;}
p{color:blue;}
p{color:orange;} /* 1순위 */

2순위. 사용자 정의 스타일

h1{
  font-size:16px;
  font-weight:normal;
}

3순위. 기본 스타일

<h1>다람쥐 헌 쳇바퀴에 타고파</h1>

---

태그와 가까운 스타일

1순위. 인라인 스타일

<div style="color: red;">인라인 스타일</div>

2순위. style 태그

<style>
  .content {
    color:red;
  }
</style>
<p class="content">클래스가 content 입니다.</p> 

3순위. css 파일

---

점수 (점수가 낮은 것 부터 설정해야 편함)

1000점

인라인 스타일

<div style="color: red;">인라인 스타일</div>

100점

아이디 선택자

<style>
  #title{
    color:green;
  }
</style>
<h1 id="title">아이디가 title 입니다</h1>

10점

1. 가상 클래스 선택자
:hover, :active 등
2. 클래스 선택자

<style>
  .content {
    color:red;
  }
</style>
<p class="content">클래스가 content 입니다.</p> 

1점

태그 선택자

<style>
  p{
    color:blue;
  }
</style>
<p>안녕하세요.</p>

---

겹치기

겹칠 시 점수 합산

<style>
  /* 2점 */
  nav > h2{}   
  /* 11점 */
  nav .title{} 
  /* 110점 */
  #main .sub{} 
  /* 11점 */
  a:hover{}
  /* 13점 */
  a:hover span::first-letter{} 
</style>

---

!important

최우선

/* 10000점 */
/* 무조건 최상위 */
p{
  color:blue !important; 
}