[CSS]선택자의 우선순위

분명 처음 들었을 때는 이해했습니다. 두번째 봤을 때는 필요할 때 금방금방 찾아서 쓸 수 있을거라 생각했구요. 역시나, 세번째 보니까 기억이 잘 안나네요. 이렇게 교수님 버프, 선생님 버프는 3일정도 지나면 꺼지는 것을 다시 증명했습니다. 3일에 걸쳐 아, 완벽히 이해했어! -> 뭐더라? -> 와, 완벽히 모르겠어! 단계가 되는거죠.
대충 HTML/CSS를 복습하고 JavaScript를 배우다보니 선택자 쓰는게 전체적으로 가물가물해졌습니다. 특히 우선순위는 찾는다고 금방 와닿지가 않아서 정리가 필요함을 느꼈습니다.

<후자 우선의 원칙>

동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따르게 됩니다.
이미 선언한 변수에 재할당되는 경우를 생각하면 쉽군요.

<구체성의 원칙>

중요하니까 제목이 커졌습니다!

좀 더 써봐야 확실히 적응할 수 있겠네요.

• 우선 순위가 1에 가까울수록 더 강합니다! 전체선택자로 style을 준 div라도 id선택자로 따로 지정했을 경우 id선택자의 style을 따라갑니다.
• 선택자를 여러개 써서 복합적으로 지정했을 경우는 혼용 방식의 점수 산정 탭의 점수를 적용해 계산합니다. 점수 산정의 경우, 만약 1점짜리(태그 선택자)가 12개 모여서 12점이 되더라도 우선순위 때문에 상위 선택자들의 우선순위를 넘을 수는 없다고 합니다.

<important?>

!important의 경우 CSS의 다른 어떤 선언보다도 우선합니다. 오류가 났을 때, 짜기 어려운 상황일 때 쓰면 좋을 것 같지만 오히려 이후에 !important 지정한 녀석 때문에 문제가 생길 경우가 많아 사용을 지양한다고 합니다. 유지 보수란게 그런 법이죠.
모 유명한 사이트의 경우 아예 important 태그 사용을 막기 위해 컴파일 과정에서 모든 속성에 important를 걸어버린다는 풍문도 있다고 하네요.

<참고 사이트>

복합선택자를 넣으면 우선순위를 계산해주는 사이트
선택자를 입력한 뒤 상단의 Sort by specificity를 누르면 우선순위대로 정렬해줍니다.