같은 elements에 selectors가 많을 때, 상속(inheritance),universal selector과 body selector 차이점

Selectors가 많을 때 어떤게 적용되는지 공부해보았다.
아래 적혀있는 순서대로 적용된다.
제일 위에 있는게 priority가 높아서 적용되는 순임..

Declarations marked ! important

Inline style (style attribute in HTML)

ID(#) selector

class(.) or pseudo-class(:)selector

Element selector (p,div,li,etc.)

Universal selector (*)

아 그리고 같은 순위에 있으면 나중에 쓴게 적용된다고 한다.
예를 들어

#copyright {
  color: red;
}

.copyright {
  color: blue;
}

.text {
  color: yellow;
}

footer p {
  color: green;
}

똑같은 element에 이런식으로 여러개의 selector가 적용되었을 경우
아이디 선택자인 빨간색으로 나타나게 된다!
그리고 강의에서 잘 안쓰고 쓰는것도 추천 안한다고 했지만
저기 위에서 가장 레벨 낮은 애로 속하는 footer p에

footer p {
  color: green !important;
}

이런식으로 임포턴트 저거 써주면
저게 적용되게 된다...ㅎㅎ
css뭔가 배우면 배울수록 재밌는듯하다.
아직 초보 단계여서 그런건가...ㅋㅋㅋㅋ

universal selector과 body selector 차이점

universal selector는
예를들어 이런식으로 쓰는데

* {
  border-top: 10px solid #1098ad;
}

요건 상속되는 개념이 아니라
그냥 모든것에 적용이 되게 된다.
근데 만약

body {
  color: #444;
  font-family: sans-serif;

  border-top: 10px solid #1098ad;
}

이런식으로 쓰게 되면 이제는 상속의 개념이 된다..
상속에서는 child 애들이 다 속성들을 받기는 하지만
자기들이 가진 속성이 있으면 그걸로 덮어지는 특징이 있다 후후후