Başka bir CSS sınıfı kullanarak bir CSS sınıfının özelliklerini geçersiz kılma

CSS3'te oldukça yeniyim ve aşağıdakileri yapabilmek istiyorum:

Bir öğeye bir sınıf eklediğimde, bu belirli öğede kullanılan başka bir sınıfın özelliklerini geçersiz kılar.

Diyelim ki bende

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

Sınıfta bakground-nonevarsayılan arka planı geçersiz kılacak bir sınıf ekleyebilmek istiyorum left.

Teşekkürler!

Özelliklerin geçersiz kılınabileceği farklı yollar vardır. Sahip olduğunuzu varsayarak

.left { background: blue }

örneğin aşağıdakilerden herhangi biri onu geçersiz kılar:

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

Seçici özgüllüğüne göre ilk iki "galibiyet"; üçüncüsü !importantkör bir aletle kazanır .

Ayrıca stil sayfalarınızı, örneğin kuralın

.background-none { background: none; }

basitçe emirle, yani eşit derecede “güçlü” bir kuralın peşinde olarak kazanır . Ancak bu, kısıtlamalar getirir ve stil sayfalarının yeniden düzenlenmesinde dikkatli olmanızı gerektirir.

Bunların tümü , çok önemli ancak yaygın olarak yanlış anlaşılan bir kavram olan CSS Cascade'in örnekleridir . Stil sayfası kuralları arasındaki çatışmaları çözmek için kesin kuralları tanımlar.

Not: Ben kullandım leftve background-nonesoruda kullanıldığı gibi. Onlar gereken sınıf adlarına örnektir değil bunlar belirli oluşturmayı değil, yapısal ya da anlamsal rolleri yansıtmak beri kullanılabilmektedir.

Sadece kullan !important, geçersiz kılmaya yardımcı olacak

background:none !important;

Kötü bir uygulama olduğu söylense de, !importanthizmet sınıfları için yararlı olabilir, sadece bunu sorumlu bir şekilde kullanmanız gerekir, şunu kontrol edin: Önemli'yi kullanmak doğru seçimdir

importantAnahtar kelimeye alternatif olarak, seçiciyi daha spesifik hale getirebilirsiniz, örneğin:

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

(Not: sınıf adları arasında boşluk yok).

Bu durumda kural, her ikisi de .leftve .background-nonesınıf özniteliğinde listelendiğinde (sıraya veya yakınlığa bakılmaksızın) uygulanır.

Sen artırarak geçersiz kılmak gerekir Özgüllük sizin stil. Özgünlüğü artırmanın farklı yolları vardır. Özgünlüğü !importantetkileyen kullanımı, stil sayfanızdaki doğal basamaklamayı bozduğu için kötü bir uygulamadır .

Css-tricks.com adresinden alınan aşağıdaki diyagram , bir nokta yapısına dayalı olarak elemanınız için doğru özgüllüğü üretmenize yardımcı olacaktır. Hangi özgüllük daha yüksek puana sahipse, kazanır. Bir oyun gibi geliyor - değil mi?

Örnek hesaplamaları burada css-tricks.com adresinde inceleyin . Bu, konsepti çok iyi anlamanıza yardımcı olacak ve sadece 2 dakika sürecektir.

Daha sonra farklı özellikleri kendiniz üretmek ve / veya karşılaştırmak isterseniz, bu Özgüllük Hesaplayıcıyı deneyin: https://specificity.keegan.st/ veya sadece geleneksel kağıt / kalem kullanabilirsiniz.

Daha fazla okumak için MDN Web Belgelerini deneyin .

Kullanmamak için en iyisi !important.

bakground-noneSınıfı diğer sınıflardan sonra listelerseniz, özellikleri önceden ayarlanmış olanları geçersiz kılar. Burada kullanmaya gerek !importantyok.

Örneğin:

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

ve

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

Bağlantının arka planı kırmızı olmayacaktır. Lütfen bunun yalnızca daha az veya eşit derecede spesifik bir seçiciye sahip özellikleri geçersiz kıldığını unutmayın.

LIFO, tarayıcının CSS özelliklerini ayrıştırma yoludur ... Sass kullanıyorsanız,

"$ başlık-arka plan: kırmızı;"

doğrudan kırmızı veya mavi gibi değerler atamak yerine kullanın. Geçersiz kılmak istediğinizde değeri yeniden atayın

"$ başlık-arka plan: mavi"

sonra

arka plan rengi: $ başlık arka planı;

sorunsuz bir şekilde geçersiz kılınmalıdır. "! Önemli" kullanmak her zaman doğru seçim değildir .. Bu yalnızca bir düzeltme