[CSS] CSS중첩과 우선순위

CSS 중첩

css는 중첩해서 사용할 수 있다. 예를 들어 1과 2에는 빨간색 글자색을, 2와 3에는 굵은 글씨체를 주고 싶다고 하자.

<div class="red">1</div>
<div class="red text_bold">2</div>
<div class="text_bold">3</div>

그러면 이렇게 표현해준 다음 css 속성을 입히면 된다. 그러나 css가 중첩될 수 있다는 점 때문에 오히려 헷갈릴 수 있다. 그러니 어떤 것이 먼저 적용되는지 우선순위를 명확히 알아야 한다.

---

CSS 우선순위

css는 먼저 부모 자식을 구체적으로 적어준 속성이 우선순위가 더 높고, class보다는 id로 지정해 준 것이 우선순위가 더 높고, 아래에 나온 속성이 위에 나온 속성을 덮어씌우게 된다.

개발자 도구(ctrl + shift + i) 를 활용해서 속성을 확인했을 때 가운뎃줄이 그어진 것은 우선순위에 밀려서 덮어씌워졌음을 의미한다.