CSS 선택기 우선순위 및 특이성에 대해 자세히 알아보세요.
P粉036800074
2023-08-22 22:06:31
<p>속성 충돌 시 CSS 선택기가 어떻게 작동하는지 알고 싶습니다. 한 속성이 다른 속성보다 어떻게 선택됩니까? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">div {
배경색: 빨간색;
}
div.my_class {
배경색: 검정색;
}
div#my_id {
배경색: 파란색;
}
본문 div {
배경색: 녹색;
}
본문>div {
배경색: 주황색;
}
body>div#my_id {
배경색: 분홍색;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="my_id" class="my_class">hello</div></pre>
<p><br /></p>
<p>선택기 우선순위는 어떻게 작동하나요? </p>
순서대로 1이 가장 낮은 특이도이고 5가 가장 높은 것입니다. https://youtu.be/NqDb9GfMXuo시연을 위해 세부정보가 표시됩니다.
여기에 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
가 동일한 스타일로 설정된 경우.