선택자 우선순위는 합산으로

여느 때처럼 강의 예제 실습 중, 이렇게 작성을 했는데, sub1,2,3 에게 부여한 background-color가 적용되지 않는 것이었다. 분명 가장 위 CSS 선택자 .box article은 class 안에 들어 있는 것이긴 해도 결과적으로 tag를 가리키고 있는데, 우선 순위가 더 높을 것인 class 선택자에 부여한 속성이 발휘가 안되다니?!
큰 혼동이 와 구글링을 해보니, CSS 최종 선택자는 마지막에 가리키는 것 기준이 아니라 점수를 합산하듯 계산을 해야한다는 것이다.

위의 경우를 예로 들면 class 우선 점수 2, tag 우선 점수 1이라고 했을 때 class+tag 는 3점, 그냥 class 선택자는 2점이니 전자가 선택된 것이다.

class 이름 앞에도 부모 요소 class를 줘봤더니 아니나 다를까 잘 작동했다. 오오오... 신기하구만

그....럼 여러 선택자가 섞여있을 때 계산은 어떻게 하지...? 라는 생각이 잠깐 들었으나... 이런 원리가 있다는 걸 알게 된게 어디냐! 그건 그 때 가서 생각하자^^!