CSS Specificity

hatban·2022년 9월 8일

Cascade?

👉 CSS 는 위에서부터 아래로 내려가면서 적용되어 아래에 있는게 최종적으로 적용이 된다!

index.html

  <body>
    <header><button>Button1</button></header>
    <section class="post">
      <button>Button2</button>
    </section>
    <footer></footer>
  </body>

styles.css

.post button {
  background-color: red;
  color: white;
}

button {
  background-color: aquamarine;
}

그런데 이 경우 다음과 같은 결과가 나온다!

왜 Button1만 아쿠아마린 색인걸까?

브라우저는 이렇게 충돌이 발생하는 경우 어떤 선택자가 더 구체적인지 계산한다
그리고 더 구체적인 선택자를 우선 선택한다

즉 위의 예시에서는 post클래스 다음에 나오는 button 선택자를 더 구체적으로 본다는 것이다!

Specificity

ID > CLASS > ELEMENT

가장 구체적인 것은 Id!
물론 html 에 직접 쓰는 inline style이 가장 강력하다!

hatban

이전 포스트

두 큐 합 같게 만들기 JavaScript

다음 포스트

CSS Specificity

Cascade?

Specificity

두 큐 합 같게 만들기 JavaScript

LeetCode - Contains Duplicate II

0개의 댓글