728x90
3. 스타일 겹침과 우선순위
(1) 스타일 겹침
- 스타일 겹침은 같은 요소로 동일한 선택자로 서로 다른 값이 적용될 경우 가장 마지막에 적용된 값이 우선한다.
(2) 스타일 우선순위
- 스타일 우선순위는 서로 다른 선택자로 같은 요소에 스타일을 적용할 경우 우선순위에 의해서 스타일이 적용되며 작성순서는 무시된다.
1) 인라인 스타일
2) 아이디 선택자
3) 클래스 선택자
4) 요소 선택자
(3) 스타일 겹침과 우선순위 무시하고 스타일 적용하기
- 스타일 겹침과 우선순위 무시하고 특정 스타일 값을 항상 적용하고자 할 때는 스타일 값 작성 후에 !important 를 써주면 된다.
- 작성 방법 : 선택자{속성 : 값 !important;}
■ 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>스타일 겹침과 우선순위</title> <style type="text/css"> .txt1{color: #f0f;} .txt1{color: #f00;} .txt1{color: #00f;} p{color: #666;} #txt1{color: #0f0;} .txt2{color: #0ff !important;} </style> </head> <body> <!-- 스타일 겹침 --> <p>스타일 겹침 테스트 : 요소 선택자 스타일 적용됨</p> <p class="txt1">스타일 겹침 테스트 : 클래스 선택자 스타일 적용됨</p> <p class="txt1" id="txt">스타일 겹침 테스트 : 아이디 선택자 스타일 적용됨</p> <p class="txt1" id="txt1" style="color: #f00;">스타일 겹침 테스트 : 인라인 스타일 적용됨</p> <!-- 스타일 적용 무시 --> <p class="txt2" id="txt2" style="color: #f00;">스타일 겹침 테스트</p> </body> </html> |
반응형