[ CSS ] css 정의 순서 > html&css

css의 우선 순위 규칙 어떻게 될까?

기본적으로 맨뒤에 나오는 css가 우선순위가 높음.

!important > inline style attribute > id 다른 attribute > tag element 순으로 우선순위가 높다짐.

우선순위가 같으면 css가 많은 녀석의 우선순위가 높음.

!important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많다. 

!important는 css 값 뒤에 붙여진 키워드를 의미하고, 인라인 스타일 속성은 태그에 주어진 style 속성 내용을 가리킨다.

이 두 가지는 최후의 수단이라고 생각하면 좋다. 따라서 나머지 id, class, tag만 살펴보도록 한다.

순위 산출 방식은 레이어로 보면된다.

id가 1번 레이어, class같은 기타 속성이 0번 레이어, 태그 이름이 -1 이하의 레이어

id 선택자에 css가 붙어있으면 class 여러 개에 css가 붙어있어도 id 선택자가 먼저 적용된다.

우선순위가 같다면 개수로 순위가 정해진다

class 하나에 달린 css보다 class 두 개에 달린 css 우선 순위가 더 높다.

개수마저 같다면 뒤에 나오는 것이 순위가 높다. 

CSS 이름 자체가 Cascading Style Sheet이다. 

이름대로 뒤에 나오는 CSS가 앞에 나오는 CSS를 덮어씌웁니다.

 

1번째 규칙대로라면 가장 마지막에 나오는 div 태그가 적용된다.

하지만 div는 3순위이기 때문에 더 우선순위가 높은 것들이 있는지 찾아보아야 한다.

2번 규칙

!important와 인라인css가 있는지 찾아본다. 

text-decoration: line-through !important; 규칙이 !important로 되어 있고, background: yellow;가 인라인 css로 되어 있다. 

이 둘은 다른 무엇보다 먼저 적용된다.

id를 찾아본다. 

#i에 붙은 css가 적용되는데 display 속성이 두 개가 있다. 

이럴 때는 나중에 나온 display: inline-block;이 우선 순위를 가진다. 

background 속성은 인라인 css가 우선 순위를 가지기 때문에 적용되지 않는다.

class 등의 속성. 

class뿐만 아니라 name 속성도 css가 적용되어 있다. 

이때는 뒤에 나온 [name=d]가 우선순위를 가지지만, 주의해야 할 점이 .a.b가 2순위이다. 

따라서 얘네의 color: blue;가 우선순위를 가집니다. 이제 남은 것은 [name=d]의 font-style: italic;

css 우선 순위를 파악하여 기존의 css를 덮어씌울 수 있다.

css간 충돌이 발생한다면 우선순위를 조정하면 된다

추천0 비추천0