[생활코딩][CSS] 캐스케이딩 cascading
개발/[언어] CSS2016. 12. 6. 22:48
3cascading 우선 순위
1. html 소스의 style 속성
2. id selector
3.class selector
4.tag selector
-> 강제로 우선순위 올리는 방법은 {} 안에 !important;를 사용
왜 우선순위를 가지고 있을까?
- 뭐가 더 구체적이고 명시적인가에 따라 우선순위를 가지고 있다.
그냥 보면 이해가 안될 수 있으니
color:white > color:blue > color:green > color:red 순으로 적용된다.
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 | <!DOCTYPE html> <html> <head> <style> li{color:red;} #idsel{color:blue;} .classsel{color:green;} </style> </head> <body> <ul> <li>html</li> <li id="idsel" class="classsel" style="color:white;">css</li> <li>javascript</li> </ul> <ol> <li>style attribute</li> <li>id selector</li> <li>class selector</li> <li>tag selector</li> </ol> </body> </html> Colored by Color Scripter cs | cs |
'개발 > [언어] CSS' 카테고리의 다른 글
| [생활코딩][CSS] inline block (0) | 2016.12.06 |
|---|---|
| [생활코딩][CSS] 다양한 선택자들 CSS 선택자 (0) | 2016.12.05 |
| [생활코딩][CSS] px vs em vs rem (0) | 2016.12.05 |
| [css] 이미지에 색 필터 넣기 (0) | 2016.11.13 |
| [css] input text속성 (0) | 2016.11.10 |
