[CSS] CSS 우선순위와 상속

1. 규칙의 충돌

css요소를 추가하다보면 css요소들이 겹쳐져 충돌하는 일이 일어난다. css는 우선순위에 따라 스타일을 적용시킨다

 

2. style 우선순위

1순위	!important
2순위	id선택자
3순위	class선택자
4순위	요소선택자
5순위	소스순서

5순위 순서의 경우

    .red{
      color: red;
    }
    .blue{
      color: blue;
    }

  <div class="red blue">red</div>
  <div class="blue red">blue</div>

다음과 같이 div class의 순서와 상관 없이 style sheet에서 나중에 적힌 스타일이 적용된다

 

3. 상속

CSS는 상속을 통해 부모 요소의 모든 속성을 자식에게 상속하지는 않는다

 

상속 되는 것 

> Text관련요소 visibility, opacity, font, color, line-heignt, text-align, white-space

 

상속 되지 않는 것

> box model 관련 요소 position 관련 요소 width/height, amrgin, padding, border, box-sizing, display, background,vertical-align, text-decoration, positon, top/right/bottom/left, z-index, overflow

 

	.red{
      color: red;
    }

    .border{
      border: 1px solid blue;
    }

<div class="red border">
      상위 태그입니다
    <div>
      하위 태그입니다
    </div>
  </div>

css의 border가 하위 태그에는 적용이 되지 않은 것을 확인할 수 있다