Saya tertanya-tanya sama ada boleh menggabungkan 2 peraturan yang digunakan pada elemen yang sama dan mengandungi gaya yang sama, tetapi salah satu peraturan adalah dalam pertanyaan media dan mendapatkan sesuatu yang serupa dengan:
.a, .b .a { color: white; background-color: black; }
Peraturannya ialah:
prefers-color-scheme
将颜色应用于 .content
, input
为 checked
时,更改 .content
Warna
:root { --dark-color: white; --dark-bg: black; --light-color: black; --light-bg: white; } @media (prefers-color-scheme: dark) { .content { color: var(--dark-color); background-color: var(--dark-bg); } } #dark-theme:checked~.content { color: var(--dark-color); background-color: var(--dark-bg); } @media (prefers-color-scheme: light) { .content { color: var(--light-color); background-color: var(--light-bg); } } #light-theme:checked~.content { color: var(--light-color); background-color: var(--light-bg); }
<input type="radio" name="color-theme" id="dark-theme"> <label for="dark-theme">dark</label> <input type="radio" name="color-theme" id="light-theme"> <label for="light-theme">light</label> <input type="radio" name="color-theme" id="default-theme" checked> <label for="default-theme">default</label> <div class="content">Test</div>
Jika prefer-color-scheme
为深色,或者选中 #dark-theme
,则此处 .content
anda akan mendapat latar belakang hitam dan warna putih.
Kedua-dua peraturan menggunakan gaya yang sama.
Adakah terdapat cara untuk menggabungkan peraturan ini?
Anda tidak boleh melakukan ini menggunakan CSS asli. Walau bagaimanapun, jika masalah anda berkaitan dengan kurang menulis, maka pengkompil CSS telah pun mengurus keperluan itu. Jika anda bersedia untuk mencubanya, berikut ialah kod ringkas yang ditulis dalam Sass.
Mula-mula, anda bungkus kandungan anda dalam
@mixin
. Ia akan menyimpan kelas anda menggunakan pembolehubah yang sepatutnya berubah berdasarkan tema yang dipilih.Selepas itu, anda boleh menggunakannya dalam campuran lain untuk menentukan gaya tema:
Akhir sekali, anda boleh menggunakannya untuk mencipta seberapa banyak tema yang anda mahu, cuma tukar pembolehubah:
Jika anda ingin melihat output yang sama seperti kod asal, anda boleh mencubanya di sini
Salin dan tampal kod lengkap untuk melihat penukaran: