Apa yang dilakukan pemilih * * CSS?

Baru-baru ini saya datang di * *dalam CSS .

Referensi situs - Tautan Situs .

Untuk *penggunaan tunggal dalam style sheet CSS, Internet dan Stack Overflow dibanjiri dengan contoh, tapi saya tidak yakin tentang menggunakan dua * *simbol di CSS.

Saya mencarinya di Google, tetapi tidak dapat menemukan informasi yang relevan tentang hal ini, karena satu *elemen memilih semua, tetapi saya tidak yakin mengapa situs tersebut menggunakannya dua kali. Apa bagian yang hilang dari ini, dan mengapa peretasan ini digunakan (jika itu adalah peretasan)?

Sama seperti waktu lain Anda meletakkan dua penyeleksi satu demi satu (misalnya li a), Anda mendapatkan kombinator turunan. Begitu * *juga elemen apa pun yang merupakan turunan dari elemen lain - dengan kata lain, elemen apa pun yang bukan elemen root dari keseluruhan dokumen.

Sedikit contoh besar:

Coba tambahkan ini di situs Anda:

* { 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; }

Demo: http://jsfiddle.net/l2aelba/sFSad/

Contoh 2:

Demo: http://jsfiddle.net/l2aelba/sFSad/34/

* *Mencocokkan semuanya kecuali elemen tingkat atas, misalnya html,.

* berarti menerapkan gaya yang diberikan ke semua elemen.

* *berarti menerapkan gaya yang diberikan ke semua elemen anak elemen. Contoh:

body > * {
  margin: 0;
}

Ini menerapkan gaya margin ke semua elemen anak badan. Cara yang sama,

* * {
  margin: 0;
}

berlaku margin: 0untuk *elemen anak. Singkatnya, ini berlaku margin: 0untuk hampir setiap elemen.

Umumnya, satu *sudah cukup. Tidak perlu dua orang * *.

Itu memilih semua elemen yang bersarang di dalam elemen lain dengan cara yang hampir sama div aakan memilih semua <a>elemen yang bersarang di suatu tempat di dalam sebuah <div>elemen.