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이 κ°€μž₯ κ°•λ ₯ν•˜λ‹€!

0개의 λŒ“κΈ€