Cara mengganti properti kelas CSS menggunakan kelas CSS lain

97

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!

css class overriding pengguna3075049
sumber

Jawaban:

90

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.

Jukka K. Korpela
sumber
Anda menulis Mereka adalah contoh nama kelas yang tidak boleh digunakan, karena mencerminkan rendering tertentu dan bukan peran struktural atau semantik. Bisakah Anda menjelaskan lebih lanjut? Mengapa harus leftdan background-nonedihindari?
Socrates
1
@Socrates: Beberapa orang merasa bahwa kelas css hanya harus diberikan nama yang mengidentifikasi apa unsur itu sedang diterapkan untuk adalah atau tidak (misalnya button, name-label, dll). Yang lain merasa bahwa CSS menjadi tidak terkendali jika Anda menggunakan pendekatan ini dan Anda harus menggunakan "utilitas-pertama" atau "fungsional" css mana kelas sesuai dengan nilai properti (misalnya margin-top-4, width-10, dll). Secara historis, pendekatan "semantik" telah dominan sementara baru-baru ini pendekatan "fungsional" telah mendapatkan pengikut. Cobalah keduanya pada proyek berukuran sedang dan kemudian putuskan sendiri mana yang lebih unggul.
Mattia
62

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

Pranav C Balan
sumber
42
! penting adalah praktik yang buruk. Segera, semua kode menjadi! Penting.
TPAKTOPA
26

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?

masukkan deskripsi gambar di sini

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.

Usman
sumber
25

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).

Marc Audet
sumber
9

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.

Ruud
sumber
Terima kasih balasannya! Saya mencoba ini sebagai solusi pertama, tetapi untuk beberapa alasan tidak berhasil!
pengguna3075049
Cara mengganti kelas css ini tidak akan berfungsi jika gayanya ditentukan dengan cara tertentu seperti .form-horizontal .form-group {margin-left: -15px}. Di sini Anda harus menggunakan! Penting
DanKodi
tambahkan! penting ke .background-none {background: none! importatn; } ini berfungsi dengan baik
santhosh
1

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

Ignatius Andrew
sumber