CSS 아이디 셀렉터, 클래스 셀렉터 우선순위

CSS 아이디 셀렉터, 클래스 셀렉터 우선순위

1 예시 1: 아이디 우선[ | ]

<style>
div { 
  width: 200px; height: 60px;
  background: yellow;
}
#my-id { background: red; }
.my-class1 { background: green; }
.my-class2 { background: blue;}
</style>

<div id='my-id' class='my-class1 my-class2'>안녕하세요</div>
→ my-id가 우선 적용[1]되어 배경색이 빨간색(red)

2 예시 2: 뒤쪽 클래스 우선[ | ]

<style>
div { 
  width: 200px; height: 60px;
  background: yellow;
}
.my-class1 { background: green; }
.my-class2 { background: blue;}
</style>

<div class='my-class1 my-class2'>안녕하세요</div>
→ my-class2가 우선 적용되어 배경색이 파란색(blue)

3 같이 보기[ | ]

4 주석[ | ]

  1. 기술적으로는... 가장 나중에 적용되어 다른 쪽에서 정의된 background를 덮어쓴다고 보는 게 더 정확할 듯.
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}