CSS 선택기 우선순위 및 특이성에 대해 자세히 알아보세요.

Question

속성 충돌 시 CSS 선택기가 어떻게 작동하는지 알고 싶습니다. 한 속성이 다른 속성보다 어떻게 선택됩니까?

div {
  배경색: 빨간색;
}

div.my_class {
  배경색: 검정색;
}

div#my_id {
  배경색: 파란색;
}

본문 div {
  배경색: 녹색;
}

본문>div {
  배경색: 주황색;
}

body>div#my_id {
  배경색: 분홍색;
}

<div id="my_id" class="my_class">hello</div>

선택기 우선순위는 어떻게 작동하나요?

Answer 1

순서대로 1이 가장 낮은 특이도이고 5가 가장 높은 것입니다. https://youtu.be/NqDb9GfMXuo시연을 위해 세부정보가 표시됩니다.

Answer 2

여기에 CSS 2.1 사양 자체와 브라우저가 특이성을 계산하는 방법에 대한 링크를 추가하겠습니다.

CSS 2.1 섹션 6.4.3:

구체성이 동일한 경우 CSS 2.1 섹션 6.4.1이 사용됩니다. :

이 내용은 스타일을 정의할 때 논의하는 것이지 사용할 때가 아닙니다. 클래스의 정의 순서.a和.b的特异性相等，则在样式表中最后定义的类将获胜。<p class="a b">...</p>和<p class="b a">...</p>将根据.a和.b가 동일한 스타일로 설정된 경우.