CSS 적용 우선순위 프론트엔드 개발자라면 반드시 알아야하는 CSS 우선순위

마크업 작업과 CSS 작업 그리고 vue.js프레임워크를 사용해서 현업에서 개발을 하면서도,

이제야 CSS 스타일 적용 우선순위에 대해서 공부하게 되네요.

매번 중복되는 요소에 style이 들어가서 우선적으로 style을 적용하기 위해서 !important를 남발했던 저 스스로 반성하게 되는 것 같습니다.

 

그럼, 스타일 적용 우선순위에 대해서 알아보겠습니다.

 

1. 속성 값 뒤에 !important 붙이는 속성.

2. HTML에서 style옵션을 준 경우

3. #id 로 지정한 속성

4. .클래스, :추상클래스로 지정한 속성

5. 태그이름으로 지정한 속성

6. 상위객체에 의해 상속된 속성

 

상위객체에 의해 상속된 속성 VS .클래스 끼리에서의 우선순위는 상위객체에 의해 상속된 속성의 스타일이 우선 적용됩니다.

 

예를 들어서

.부모요소 a{

  color: black;

}

.a요소의 클래스 {

  color: red;

}

결과는 검정색이 나옵니다.

 

 

참고블로그