(CSS) 개발자 모드 css 적용 안될 때, 스타일 취소선 해결법

 

css로 열심히 꾸미다가 css가이 적용이 안되어서 개발자 도구를 열어보았다. 

 

확인해 보니 해당 부분에 취소선이 그어져 있었다. 

 

 

 

 

결국 취소선을 해결하기 위해 찾아봤고 그 결과 css에는 우선순위가 있어서,

 

스타일이 겹치면 우선순위가 높은 스타일이 적용된다는 것을 알게 되었다. 

 

확인해 보니 내가 적용하고 싶었던 스타일은 class로 작업하고 있었고,

 

해당 요소에 스타일이 겹치는 id가 있었는데, id가 class가 우선순위가 높아서 class의 css가 적용되지 않는 것이었다.

 

참고로 css에서 우선순위는 아래와 같다. 참고로 우선순위가 같으면 더 뒤에 위치한 css가 적용된다.

 

1. 속성 값 뒤에! important를 붙인 속성
2. HTML에서 style을 직접 지정한 속성
3. #id 속성
4. .클래스, :추상클래스 속성
5. 태그이름으로 지정한 속성
6. 상위 객체에 의해 상속된 속성

 

 

모든 id를 클래스로 바꾸면 될 일이었지만, 이미 수많은 스크립트에 id를 작성했기에! important를 사용해 해결했다.

 

(사실! important를 사용하지 않고 해결하는 것이 더 바람직하다.)

 

! important는 우선순위를 높이고자 하는 스타일 뒤에 작성하면 된다. 

 

.hidden {
  display: none !important; /*가장 높은 우선순위를 적용받게 된다.*/
}