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

Question

CSS 선택기가 속성 충돌을 처리하는 방법을 이해하고 싶습니다. 한 속성을 다른 속성보다 선택하는 방법은 무엇입니까?

으아아아 으아아아

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

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 클래스의 특이성이 동일한 경우 스타일 시트에 마지막으로 정의된 클래스가 우선합니다.

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

...

和

...

的样式相同，基于.a和.b

는 를 기준으로

...

와 동일한 스타일을 가집니다. a와 .b의 정의 순서입니다. 🎜