CSS 스타일태그 들의 우선순위

연산자에서의 곱연산(×), 합연산(＋), 차연산(－), 분연산(÷) 의 곱ㆍ분연산 우선조건 이나

논리연산자의 && || !! 처럼 CSS에도 우선순위가 있다.

그럼 우선 CSS의 적용 우선 순위를 알아보자 .

0. !important

ex) red { color : red !important; }

1. Style : style="color:red;"

ex) <table style="color:red;">

2. ID : #type { color: red; }

ex) #red { color:red; }

3. class : .contents { color:red; }

ex) .red { color:red; }

4. 조건 : P B { color:red; }

ex) red .color { color:red; }

5. 타입 : B { color:red; }

ex) red { color:red; }

순서대로 0번이 가장 높은 우선 순위를 가지고 있다.

즉 html 태그에 직접 스타일을 써놓은것이 우선적으로 적용된다.

0번의 !important는 어떠한 경우에도 이 스타일을 적용하고 싶을 때 적용한다.

CSS가 상위의 다른 CSS와 충돌이 나서 문제가 생길때는 조건을 주어 해당 CSS의 우선순위가 높아지게 하면 어느정도 해결 될 수 있다.

또한, 우선순위의 차이가 난다고 하더라도 하위에서 재정의한것이 아니면 상위의 있는 스타일이 적용된다.

상위에서 text-align을 정의하고 하위에서 color를 적용하더라도 여전히 text-align은 적용이 된다.

마지막으로 , CSS는 객체지향이 아닌 순차지향태그다.

따라서 중복되는 태그더라도 같은 태그 내 위쪽에서 선언한 스타일보다 아래쪽에 선언한 스타일이 적용된다.

태더데스크의 스타일을 무시하고 티스토리 내의 style.css를 활용해서 태더데스크 스타일을 조절하려다가 포스팅해본다.