Front-End/CSS

CSS - 상속과 우선순위 결정

HappyWeasel 2020. 7. 6. 01:33

상속

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div ul span{
            color : red;
        }
        
        div > ul{
        	color : green;
        }
    </style>
</head>
<body>
    <div>test</div>
    <div>
        <span>test span</span>
        <ul>
            <span>dummy span</span>
            <div>
                <p>p test</p>
            </div>
        </ul>
    </div>
</body>
</html>

위의 코드와 같이 css 코드의 selector(선택자)에 상속 범위를 지정할 수 있다.

  • 나열하는 방식
    • 위와 같이 div ul span{ ... }
  • 직계 자식만 적용하는 방식
    • div > ul { ... }
      • ul의 하위 자식은 영향을 받지 않는다.

상위에서 적용한 스타일은 하위에도 반영된다.
하지만 모든 CSS 속성이이런 특징을 갖게 되면, 몇몇의 문제가 생긴다.
예를 들면 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있다.
그래서 box-model(width, height, margin, padding, border)과 같이 크기와 배치 관련 된 속성들은 하위 엘리먼트로 상속되지 않는다.

 

우선순위

  • css 적용 방식에 따른 우선 순위
    • inline > internal = external
  • 선택자 순
    • id > class > element 
#a{
 color : red;
}

.b{
 color : blue;
}

div{
 color : green;
}

 

  • 선언 방식에 의한 차이
    • body > span
    • span
      • 조금 더 구체적인 body > span이 적용 된다.