Apa yang dilakukan Asterisk (*) di pemilih CSS?

98

Saya menemukan kode CSS ini dan saya menjalankannya untuk melihat apa yang dilakukannya dan itu menguraikan SETIAP elemen di halaman,

Adakah yang bisa menjelaskan apa yang dilakukan Asterisk * di CSS?

<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
sumber

@jasondavis - Pertanyaan ini khusus untuk kode Anda atau saya hanya akan mengajukan pertanyaan baru. Apakah halaman Anda menampilkan beberapa garis besar dengan warna berbeda? Satu-satunya cara saya dapat menghasilkan warna yang berbeda seperti itu adalah jika saya menentukan tag kemudian * IE div * { outline ...}dan * { outline ... }. Jika saya menggunakan * { outline ... }dan * * { outline ... }hanya deskripsi css terakhir yang digunakan.

— JabberwockyDecompiler

95

Ini adalah karakter pengganti, artinya ia akan memilih semua elemen dalam bagian DOM tersebut.

Misalnya, jika saya ingin menerapkan margin ke setiap elemen di seluruh halaman saya, Anda dapat menggunakan:

* {
    margin: 10px;
}

Anda juga dapat menggunakan ini dalam sub-pilihan, misalnya berikut ini akan menambahkan margin ke semua elemen dalam tag paragraf:

p * {
    margin: 10px;
}

Contoh Anda adalah melakukan beberapa tipuan css untuk menerapkan batas dan margin yang berurutan ke elemen untuk memberi mereka banyak batas berwarna. Misalnya, bingkai putih yang dikelilingi bingkai hitam.

— Soviut
sumber

Apa keuntungan menggunakan p *dibandingkan dengan hanya menggunakan p?

— Solomon Closson

7

Tidak ada "keuntungan", ini hanya bagaimana Anda memilih semua elemen turunan di dalam sebuah ptag. Jadi, jika Anda memiliki span, b, strong, img, dll dalam paragraf Anda, itu akan memilih orang-orang dan menerapkan gaya mereka.

— Soviut

30

CSS yang Anda referensikan sangat berguna bagi desainer web untuk men-debug masalah tata letak halaman. Saya sering memasukkannya ke halaman untuk sementara sehingga saya dapat melihat ukuran semua elemen halaman dan melacaknya, misalnya, salah satu yang memiliki terlalu banyak padding yang mendorong elemen lain keluar dari tempatnya.

Trik yang sama dapat dilakukan hanya dengan baris pertama, tetapi keuntungan dari mendefinisikan beberapa garis besar adalah Anda mendapatkan petunjuk visual melalui warna batas ke hierarki elemen halaman bersarang.

— Tom
sumber

2

Meskipun sekarang ini, pemeriksa bawaan browser jauh lebih efektif, bukan? Atau menggunakan firebug.

— Lawrence Dol

@SoftwareMonkey - Ya, hari-hari ini itu benar. Inspektur built-in sangat bagus. Misalnya, saya menggunakan Chrome dan Ctrl+Shift+ckemudian mengarahkan kursor ke elemen dan Chrome mewarnai latar belakang. Jauh lebih cepat daripada menjatuhkan gaya tanda bintang ini ke dalam CSS.

— Tom

1

Walaupun jawaban Soviut benar, seharusnya jawaban ini diberi tanda sebagai jawaban yang benar, karena ini adalah jawaban yang tepat untuk pertanyaan yang diajukan.

— Billy Samuel

4

* adalah karakter pengganti. Artinya adalah itu akan menerapkan gaya ke elemen HTML apa pun. Tambahan * menerapkan gaya ke tingkat bersarang yang sesuai.

Pemilih ini akan menerapkan garis tepi berwarna berbeda ke semua elemen halaman, bergantung pada tingkat bertingkat elemen.

— futureelite7
sumber

4

* bertindak sebagai karakter pengganti, seperti di sebagian besar contoh lainnya.

Jika kamu melakukan:

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

Kemudian semua elemen HTML akan memiliki gaya tersebut.

— Mike Trpcic
sumber

0

di stylesheet Anda, biasanya Anda perlu menentukan aturan dasar untuk semua elemen seperti atribut font-size dan margin. {font-size: 14px; margin: 0; padding: 0;} / mengabaikan pengaturan default browser pada elemen, semua ukuran font teks akan dirender sebagai ukuran 14 piksel dengan margin dan padding nol, termasuk h1, ... pre. * /

— Mikel bradley benjamin
sumber