CSS tümünü seçin, bazılarını seçin, ancak tüm öğeleri değil?

Question

Herhangi bir öğede sınır yarıçapı olmayan bir site yapıyorum ve stil sayfamda birden çok kez outline: 0; kullanmak yerine seçiciyi outline: 0; herşeyi uygulamak için kullanmaya çalışıyorum;

* { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    outline: 0; 
    outline: none; 
    border-radius:0; 
} 

Bu CSS, giriş alanları, düğmeler gibi bazı öğeler üzerinde çalışır.

Bootstrap kullanıyorum ve sonra kendi stil sayfam dahil. Stil sayfamda başka hiçbir örnek yok border-radius.

Neden yuvarlak kenarlar ve bunun gibi ana hatlar var?

Answer 1

Bu, specificity nedeniyle oluşur. * seçici kendisi 0, 0 bir özgüllük puanı, Bootstrap odaklama ile 0.

Düğmeler sahiptir aşağıdaki seçici vardır: Bu, bu anlam, 0, 1, 1 bir özgüllük puanı vardır

.btn:focus { ... } 

bildirimi, stil sayfasının bulunduğu yere bakılmaksızın * bildirimini geçersiz kılar.

Bu, !important'un haklı olarak kullanılabileceği birkaç durumdan biridir; Gerçi hep yapmak istiyorum değilseniz, daki selektör dizisine bu deklarasyon Bootstrap geçersiz kılmak ve bu seçiciler eklemez bütün davaları bulmak gerekir:

*, 
.btn:focus { ... } 

Answer 2

Eğer !important eklemem gerekiyor Üzerine yazması gereken belirli bir şey için her özellikte. Eğer `anahat uygulamak zorunda olduğu için

* { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    outline: 0; 
    outline: none!important; 
    border-radius:0!important; 
}