css 선택자 우선순위

//html
<p>문단1</p>
<p class="class">문단2</p>
<p id="id">문단3</p>

//css
p {
  text-align: center;
  color: red;
}
p.class {
  text-align: right;
  color: blue;
}
#id {
  text-align: left;
  color: green;
}

태그 선택자 보다 class와 id 선택자가 우선된다.

<ul>
  <li>태그</li>
  <li class="text">클래스</li>
  <li class="text" id="text">아이디</li>
  <li class="text" id="text" style="color: gold">인라인</li>
  <li>!important</li>
</ul>

li {
  color: red;
}
.text {
  color: blue;
}
#text {
  color: green;
}

태그 > red

태그 + 클래스 > blue

태그 + 클래스 + 아이디 > green

태그 + 클래스 + 아이디 + 인라인 > gold

li {
  color: red !important;
}
.text {
  color: blue;
}
#text {
  color: green;
}

제일 우선순위가 낮은 태그선택자의 color 속성에 !important를 주면

모든 선택자를 무시하고 우선 적용된다.