2018. 1. 19. 10:43ㆍ웹 표준 퍼블리싱 바이블
1. 선택자의 우선순위란?
어떤 대상을 여러 번 선택하고 샅은 속성을 지정했다면, 순서에 관계없이 우선 순위가 높은 선택자가 적용될 것입니다. 선택자의 우선 순위를 값으로 표현한다면 공통 선택자는 "0", 타입 선택자는 "1", 클래스 선택자는 "10", 아이디 선택자는 "100"의 우선 순위를 가집니다. 물런 그 값이 클수록 우선 적용됩니다.
1-1. 다음의 예제에서 ".area p" 선택자는 그 값이 클래스와 타입을 더해 "11"을 가지고 "area #text"는 클래스와 아이디를 더해 "110"의 값을 가집니다. 결국 ".area #text"로 선택한 방법이 적용됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area p{color: brown;} .area #text{color: orange;} </style> </head> <body> <div class="area"> <p id="text"> 앙큼한유채`s 일상 Story </p> </div> </body> </html>
|
1-2. 한편 스타일을 시작태그에 인라인 형식으로 지정한다면 그 값이 "1000"정도로 아주 높아집니다. 앞의 예제에서 만일<p>요소에 인라인 형식으로 직접 입력한다면 그 값이 적용될 것입니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area p{color: brown;} .area #text{color: orange;} </style> </head> <body> <div class="area"> <p id="text" style="color: lightblue;"> 앙큼한유채`s 일상 Story </p> </div> </body> </html>
|
2. 우선 순위에 관계없이 적용되는 css, !important
선택자의 우선 순위와는 관계없이 무조건 적용되어야 하는 속성이 있을 수 있습니다. 이런 경우에는 해당 스타일의 속성값 마지막에 "!important"를 입력하면 됩니다.
이전 예제에서 적용한 스타일을 다음과 같이 수정하면, ".area p"의 우선순위가 ".area #text"보다 훨씬 낮음에도 불구하고 우선 적용됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area p{color: brown !important;} .area #text{color: orange;} </style> </head> <body> <div class="area"> <p id="text" style="color: lightblue;"> 앙큼한유채`s 일상 Story </p> </div> </body> </html>
|
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-4. 서체(font)와 글(text) 스타일 - 2 (0) | 2018.01.24 |
|---|---|
| 4-4. 서체(font)와 글(text) 스타일 - 1 (0) | 2018.01.23 |
| 4-2. 다양한 선택자 알아보기 - 4 (0) | 2018.01.18 |
| 4-2. 다양한 선택자 알아보기 - 3 (0) | 2018.01.17 |
| 4-2. 다양한 선택자 알아보기 - 2 (0) | 2018.01.16 |