Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?

Betapa istimewa @rules (seperti @keyframes dan @media)?

Seseorang bertanya kepada saya soalan ini baru -baru ini. Reaksi pertama saya ialah: masalah yang pelik! Specialty adalah mengenai pemilih, dan @ peraturan bukan pemilih, jadi ... tidak penting?

Untuk membuktikannya, kita boleh menggunakan pemilih yang sama di dalam dan di luar peraturan @ untuk melihat sama ada ia mempengaruhi kekhususan.

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

Latar belakang hitam. Tetapi ... adakah ini kerana pertanyaan media meningkatkan kekhususan? Mari bertukar pesanan.

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

Latar belakang merah, jadi tidak. Latar belakang merah menang hanya kerana ia kembali dalam helaian gaya. Pertanyaan media tidak menjejaskan kekhususan.

Jika rasanya seperti pemilih meningkatkan kekhususan dan menimpa gaya lain dengan pemilih yang sama, ia mungkin hanya kerana ia mundur dalam lembaran styleshe.

Namun, @Keyframes dalam soalan asal membuat saya berfikir. Sudah tentu, kerangka utama boleh menjejaskan gaya. Bukan sesuatu yang khusus, tetapi jika gaya akhirnya ditimpa, ia mungkin merasa seperti khusus.

Sila lihat contoh kecil ini:

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

Anda mungkin berfikir latar belakang harus merah, terutama jika ada peraturan penting di sana. (Dengan cara ini,! Jadi ini adalah fenomena aneh yang memerlukan perhatian. (Menurut Estelle Weyl, ia menjadi pepijat sejak sekurang -kurangnya 2014.)

Atas ialah kandungan terperinci Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!