CSS 선택기 우선순위/특정성 디코딩

Question

CSS 선택기가 속성 충돌을 처리하는 방법을 알고 싶습니다. 한 속성을 다른 속성보다 선택하는 방법은 무엇입니까? div{배경색:빨간색;}div.my_class{배경색:검정색;}div#my_id{배경색:파란색;}bodydiv{배경색:녹색;}body>div{배경색:주황색;

P粉852114752 · Answer

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

P粉384366923 · Answer

CSS 2.1 사양 자체에 대한 링크를 추가하고 브라우저가 특이성을 계산하는 방법:

CSS 2.1 섹션 6.4.3:

속성이 동일하면 CSS 2.1 섹션 6.4.1 이 적용됩니다.

여기서 논의되는 것은 스타일이 사용되는 시점이 아니라 스타일이 정의되는 시점이라는 점을 참고하세요. .a 클래스와 .b 클래스의 특이성이 동일한 경우 스타일 시트에 마지막으로 정의된 클래스가 우선합니다.

....a 和 .b 具有相同的特异性，则以样式表中最后定义的那个为准。

...

和 ... 的样式相同，基于.a和.b는 를 기준으로 ...와 동일한 스타일을 가집니다. a와 .b의 정의 순서입니다. 🎜