CSS selector

selector 결합

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}

.a div .b .pre span {
background-color: yellow;
}

selector 우선순위
이 우선순위는 점수 계산으로 이루어집니다.
inline styling(13줄에 style 요소로 직접): 1000점
id: 100점
class: 10점
tag: 1점

<p class="p-tag">나는 p태그, class가 있다</p>

p태그에 적용된 30px은 1점
p-tag클래스에 적용된 15px는 10점이므로 15px이 적용된 것.
만약 css에 아래가 추가된다면?

p.p-tag {
  font-size: 100px;
}

1점(p) + 10점(.p-tag) = 11점 이기 때문에 해당 요소는 100px이 적용될 것

실제로 이렇게 점수 계산하며 하지는 않음.
점수의 gap이 워낙 크기 때문에 아래의 개념정도만 알면 됩니다.
tag <<<<< class <<<< id <<<<<< inline css