@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?

@Rules (예 : @KeyFrames 및 @Media)는 얼마나 특별합니까?

누군가 최근 에이 질문을했습니다. 나의 첫 번째 반응은 : 이상한 문제! Specialty는 선택기에 관한 것이며 @ 규칙은 선택기가 아니므로 ... 중요하지 않습니까?

이를 증명하기 위해 @ 규칙 안팎에서 동일한 선택기를 사용하여 특수성에 영향을 미치는지 확인할 수 있습니다.

 <code>body { background: red; } @media (min-width: 1px) { body { background: black; } }</code>

배경은 검은 색입니다. 그러나 ... 미디어 쿼리가 특이성을 증가시키기 때문입니까? 교환 순서하자.

 <code>@media (min-width: 1px) { body { background: black; } } body { background: red; }</code>

배경은 빨간색이므로 그렇지 않습니다. 빨간 배경은 스타일 시트로 돌아 왔기 때문에 승리합니다. 미디어 문의는 특수성에 영향을 미치지 않습니다.

셀렉터가 특정 선택자로 특수성을 향상시키고 동일한 선택기를 사용하여 다른 스타일을 덮어 쓰고있는 것처럼 느껴지면 스타일 시트의 뒤로 있기 때문일 수 있습니다.

그래도 원래 질문의 @keyframes는 내가 생각하게했습니다. 물론 키 프레임은 스타일에 영향을 줄 수 있습니다. 특수성은 아니지만 스타일이 마침내 덮어 쓰여 있다면 특수한 느낌이들 수 있습니다.

이 작은 예를 참조하십시오 :

 <code>@keyframes winner { 100% { background: green; } } body { background: red !important; animation: winner forwards; }</code>

특히 중요한 규칙이 있다면 배경이 빨간색이라고 생각할 수도 있습니다. (그건 그렇고,! 중요성은 특수성에 영향을 미치지 않습니다. 규칙의 문제입니다.) Firefox에서는 빨간색이지만 크롬에서는 녹색입니다. 따라서 이것은주의가 필요한 이상한 현상입니다. (Estelle Weyl에 따르면 2014 년 이후 버그였습니다.)

위 내용은 @keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!