Cara mengganti properti kelas CSS menggunakan kelas CSS lain

Saya cukup baru mengenal CSS3 dan saya ingin dapat melakukan hal berikut:

Saat saya menambahkan kelas ke dalam elemen, itu menimpa properti kelas lain yang digunakan dalam elemen khusus ini.

Katakanlah saya punya

<a class="left carousel-control" href="#carousel" data-slide="prev">

Saya ingin dapat menambahkan kelas yang dipanggil bakground-none, yang akan menimpa latar belakang default di kelas left.

Terima kasih!

Ada berbagai cara untuk mengganti properti. Dengan asumsi Anda sudah

.left { background: blue }

misalnya, salah satu dari berikut ini akan menimpanya:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

Dua yang pertama "menang" berdasarkan kekhususan pemilih; yang ketiga menang !important, instrumen tumpul.

Anda juga bisa mengatur style sheets Anda sehingga misalnya aturannya

.background-none { background: none; }

menang hanya karena urutan, yaitu dengan mengikuti aturan yang sama-sama “kuat”. Tapi ini memberlakukan batasan dan mengharuskan Anda berhati-hati dalam mengatur ulang style sheet.

Ini semua adalah contoh CSS Cascade , sebuah konsep yang penting namun banyak disalahpahami. Ini mendefinisikan aturan yang tepat untuk menyelesaikan konflik antara aturan style sheet.

PS Saya digunakan leftdan background-noneseperti yang digunakan dalam pertanyaan. Mereka adalah contoh nama kelas yang tidak boleh digunakan, karena mencerminkan rendering tertentu dan bukan peran struktural atau semantik.

Gunakan saja !importantitu akan membantu untuk menimpa

background:none !important;

Meskipun dikatakan sebagai praktik yang buruk, !importantdapat berguna untuk kelas utilitas, Anda hanya perlu menggunakannya secara bertanggung jawab, periksa ini: Saat Menggunakan yang penting adalah pilihan yang tepat

Anda harus mengganti dengan meningkatkan Kekhususan gaya Anda. Ada berbagai cara untuk meningkatkan Specificity. Penggunaan !importantyang mempengaruhi kekhususan, adalah praktik yang buruk karena merusak aliran alami di lembar gaya Anda.

Diagram berikut yang diambil dari css-tricks.com akan membantu Anda menghasilkan spesifisitas yang tepat untuk elemen Anda berdasarkan struktur poin. Kekhususan mana pun yang memiliki poin lebih tinggi, akan menang. Kedengarannya seperti permainan - bukan?

Lihat contoh penghitungan di sini di css-tricks.com . Ini akan membantu Anda memahami konsep dengan sangat baik dan hanya perlu waktu 2 menit.

Jika Anda kemudian ingin membuat dan / atau membandingkan berbagai kekhususan sendiri, coba Kalkulator Kekhususan ini: https://specificity.keegan.st/ atau Anda dapat menggunakan kertas / pensil tradisional.

Untuk bacaan lebih lanjut cobalah MDN Web Docs .

Semua yang terbaik untuk tidak digunakan !important.

Sebagai alternatif dari importantkata kunci, Anda dapat membuat pemilih lebih spesifik, misalnya:

.left.background-none { background:none; }

(Catatan: tidak ada spasi di antara nama kelas).

Dalam kasus ini, aturan akan berlaku jika keduanya .leftdan .background-nonedicantumkan dalam atribut kelas (terlepas dari urutan atau kedekatannya).

Jika Anda membuat daftar bakground-nonekelas setelah kelas lain, propertinya akan menggantikan yang sudah disetel. Tidak perlu menggunakan di !importantsini.

Sebagai contoh:

.red { background-color: red; }
.background-none { background: none; }

dan

<a class="red background-none" href="#carousel">...</a>

Tautan tidak akan berlatar belakang merah. Harap perhatikan bahwa ini hanya menimpa properti dengan pemilih yang kurang atau sama spesifiknya.

LIFO adalah cara browser mem-parsing properti CSS..Jika Anda menggunakan Sass, deklarasikan variabel yang disebut sebagai

"$ header-background: red;"

gunakan itu alih-alih langsung menetapkan nilai seperti merah atau biru. Bila Anda ingin menimpa, tetapkan kembali nilainya ke

"$ header-background: blue"

kemudian

background-color: $ header-background;

seharusnya diganti dengan mulus. Menggunakan "! Penting" tidak selalu merupakan pilihan yang tepat..Itu hanya perbaikan terbaru