CSS에는 id, class, 속성 등 여러가지 선택자가 존재한다.
이중 적용 순서에 대해 알아보자.
!important
가장 우선시되는 선택자로, 다른 어떤 요소보다 중요하다.
ex)p { color: red !important; }
인라인 스타일
태그안에 style을 주는 방식으로, 내부,외부 스타일시트 보다 높은 우선순위를 가진다.
ex) <tag style = "" >
ID 선택자
인라인 스타일 다음으로 우선순위를 가진다.
ex)
#selector { 스타일 값; }
CLASS 선택자, 속성기반 선택자, 가상 클래스, 가상 요소
네가지는 모두 동일한 우선순위를 가진다. 이 이외의 우선순위를 포함하여 비교하거나, 모두 같을경우 위에 작성한 순서대로 우선순위를 가진다
ex) CLASS 선택자
.selctor{ 스타일 값; }
ex) 속성기반 선택자
a[href*=”#”]
ex) CLASS 선택자
a:hover
ex) CLASS 선택자
span::after
태그 선택자
전체 선택자를 제외한 선택자중 가장 낮은 우선순위를 가진 선택자다.
ex) div{스타일 값;}
전체 선택자
가장 낮은 우선순위를 가지는 선택자이다.
ex) * {스타일 값;}
마지막으로 CSS 선택자 공부를 할때 도움이 되는 웹사이트 하나를 추천해주겠다.
게임을 하며 CSS 선택자에 대한 공부를 할 수 있는 웹사이트이다.
https://flukeout.github.io/
