#CSS 상속 #선택자 우선순위(CSS Specificity)
상위에서 적용한 스타일은 하위에도 반영된다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.
단, 모든 CSS 속성이 이런 특징을 갖게되면 몇 가지 문제가 생긴다. 예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있다. 그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치에 관련된 속성들은 하위엘리먼트로 상속되지 않는다. 이렇게 CSS는 꽤 똑똑한 방식으로 동작한다.
만약 만약 아래와 같은 스타일이 주입되었을 때, css.css에서 div.color를 blue로 주면, 이후 선언된 external 방식의 css가 반영된다.
<head>
<style>
div {
color: red;
}
</style>
<link rel="stylesheet" href="css.css">
</head>
즉 위와 같은 구조일 경우 div는 blue로 표현되는데 즉 internal과 external은 같은 우선순위로 결정된다는 것을 알 수 있다. 즉 CSS는 여러가지 스타일 정보를 기반으로 최종적으로 '경쟁'에 의해 적절한 스타일이 반영된다.
<div id="test" class="b">
text...
</div>
#test {
color: red;
}
.b {
color: blue;
}
div {
color: green;
}
만약 div #test에 위와 같은 CSS 값이 적용되어 있다면 어떻게 될까? red로 표현됨
이유는 CSS는 id > class > element 순으로 우선순위를 가지기 때문이다. id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선된다. 위 코드에서는 id인 test의 색상인 red가 적용되는데 이러한 성질을 cascading 이라고 한다.
만약 같은 선택자(selector)라면 나중에 선언한 것이 방영된다.
선택자의 표현이 구체적인 것이 있다면 먼저 적용된다.