CSS seçicide Yıldız (*) ne işe yarar?

98

Bu CSS kodunu buldum ve ne yaptığını görmek için çalıştırdım ve sayfadaki HER öğeyi özetledi,

Birisi Yıldız işaretinin * CSS'de ne yaptığını açıklayabilir mi?

<style>
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
</style>

css css-selectors

— JasonDavis
kaynak

@jasondavis - Bu soru kodunuza özeldir, yoksa sadece yeni bir soru sorardım. Sayfanız farklı renklerde birden çok ana hat mı gösteriyor? Bunun gibi farklı renkler üretebilmemin tek yolu, bir etiket belirtip ardından * IE div * { outline ...}ve * { outline ... }. Ben kullanırsanız * { outline ... }ve * * { outline ... }sadece son css açıklama kullanılır.

— JabberwockyDecompiler

95

Bu bir joker karakterdir, bu, DOM'nin bu bölümündeki tüm öğeleri seçeceği anlamına gelir.

Örneğin, sayfamın tamamındaki her öğeye marj uygulamak istersem şunları kullanabilirsiniz:

* {
    margin: 10px;
}

Bunu alt seçimler içinde de kullanabilirsiniz, örneğin aşağıdaki paragraf bir paragraf etiketi içindeki tüm öğelere bir kenar boşluğu ekler:

p * {
    margin: 10px;
}

Örneğiniz, öğelere birden çok renkli kenarlık vermek için ardışık kenarlıklar ve kenar boşlukları uygulamak için bazı css hileleri yapıyor. Örneğin, siyah bir kenarlıkla çevrili beyaz bir kenarlık.

— Soviut
kaynak

p *Sadece kullanmak yerine kullanmanın avantajı nedir p?

— Solomon Closson

7

Bir "avantaj" yoktur, bu sadece bir petiket içindeki tüm alt öğeleri seçme şeklidir. Eğer bir olsaydı Yani span, b, strong, imgsenin paragrafın iç vs., bu o seçmek ve onlara stilleri uygulamak olacaktır.

— Soviut

30

Referans verdiğiniz CSS, sayfa düzeni sorunlarının giderilmesi için bir web tasarımcısı için çok kullanışlıdır. Sık sık onu geçici olarak sayfaya bırakıyorum, böylece tüm sayfa öğelerinin boyutunu görebilir ve örneğin, çok fazla dolgusu olan ve diğer öğeleri yerinden çıkaran birini izleyebilirim.

Aynı numara sadece ilk satırla da yapılabilir, ancak birden fazla ana hat tanımlamanın avantajı, iç içe geçmiş sayfa öğelerinin hiyerarşisine sınır rengi aracılığıyla görsel bir ipucu almanızdır.

— Tom
kaynak

2

Bugünlerde yerleşik denetçiler tarayıcı çok daha etkili olsa da, değil mi? Veya kundakçılık kullanarak.

— Lawrence Dol

@SoftwareMonkey - Evet, bugünlerde bu doğru. Yerleşik denetçiler harika. Örneğin, Chrome kullanıyorum ve Ctrl+Shift+cardından bir öğenin üzerine geliyorum ve Chrome arka planı renklendiriyor. Bu yıldız stilini CSS'ye bırakmaktan çok daha hızlı.

— Tom

1

Soviut'un cevabı doğru olsa da, bu cevap doğru cevap olarak işaretlenmiş olmalıydı, çünkü sorulan sorunun tam cevabı bu.

— Billy Samuel

4

* bir joker karakterdir. Anlamı, stili herhangi bir HTML öğesine uygulayacağıdır. Ek * 'ler stili karşılık gelen yuvalama düzeyine uygular.

Bu seçici, öğelerin iç içe geçme düzeyine bağlı olarak bir sayfanın tüm öğelerine farklı renkli ana hatlar uygular.

— Gelecekelite7
kaynak

4

* çoğu durumda olduğu gibi joker karakter görevi görür.

Yaparsan:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

Daha sonra tüm HTML öğeleri bu stillere sahip olacaktır.

— Mike Trpcic
kaynak

0

stil sayfanızda, genellikle yazı tipi boyutu özelliği ve kenar boşlukları gibi tüm öğeler için temel kural tanımlamanız gerekir. {yazı tipi boyutu: 14px; kenar boşluğu: 0; padding: 0;} / öğelerde tarayıcının varsayılan ayarını geçersiz kıldıysanız, tüm metin yazı tipi boyutu sıfır kenar boşluğu ve dolgulu, h1, ... pre dahil 14 piksel boyutunda oluşturulacaktır. * /

— Mikel Bradley Benjamin
kaynak