[CSS] CSS 선택자의 우선순위

만약 하나의 div의 class에 font-size가 적용되어있고 inline-style에도 font-size가 적용되어 있다면 어떤것이 우선적으로 적용될까?

css선택자의 우선순위

• 인라인 스타일: 인라인 스타일은 요소에 직접 적용되는 스타일로, 가장 높은 우선순위를 가진다.

  <div style="color: red;"> ... </div>

• ID 선택자: ID 선택자 (#)는 특정 ID를 가진 하나의 요소를 선택한다. 이 선택자는 인라인 스타일 바로 다음의 우선순위를 가진다.

  #someId { color: blue; }

• 클래스 선택자, 속성 선택자, 가상 클래스: 클래스(.), 속성([]), 및 가상 클래스(:) 등의 선택자들은 ID 선택자보다는 낮은 우선순위를 가진다.

  .someClass { color: yellow; } //클래스
  [data-attr='value'] { color: purple; } //속성 선택자
  a:hover { color: green; } //가상 클래스

• 요소(타입) 선택자와 가상 요소: 요소(또는 타입)와 가상 요소(::) 선택자들은 낮은 우선순위를 갖는다.

  p { color: black; } //요소 선택자
  p::after { content:" ";  background-color:black;} // 가상요소 선택자

• 중요성 (!important): 모든 위 규칙보다 !important가 붙어있으면 가장 우선순위가 높아진다.

  p{color:green!important;}