Apa perbedaan antara * dan * | * di CSS?

Di CSS, *akan cocok dengan elemen apa pun.

Seringkali, *|*digunakan sebagai ganti *untuk mencocokkan semua elemen. Ini umumnya digunakan untuk tujuan pengujian.

Apa perbedaan antara *dan *|*dalam CSS?

Sesuai Spesifikasi Pemilih W3C :

Selektor universal memungkinkan komponen namespace opsional. Ini digunakan sebagai berikut:

ns|*
semua elemen di namespace ns

*|*
semua elemen

|*
semua elemen tanpa namespace

*
jika tidak ada namespace default yang ditentukan, ini setara dengan * | *. Kalau tidak, ini setara dengan ns | * di mana ns adalah namespace default.

Jadi, tidak *dan *|*tidak selalu sama. Jika ruang nama default disediakan maka *pilih hanya elemen yang merupakan bagian dari namespace itu.

Anda dapat melihat perbedaan secara visual menggunakan dua cuplikan di bawah ini. Dalam yang pertama, namespace default didefinisikan dan sehingga *pemilih menerapkan latar belakang berwarna krem ​​hanya untuk elemen yang merupakan bagian dari namsepace sedangkan *|*berlaku perbatasan untuk semua elemen.

@namespace "http://www.w3.org/2000/svg";

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

Dalam cuplikan di bawah ini tidak ada namespace default yang ditentukan dan keduanya *serta *|*berlaku untuk semua elemen dan semuanya mendapatkan latar belakang krem ​​dan perbatasan hitam. Dengan kata lain, mereka bekerja dengan cara yang sama ketika tidak ada namespace default yang ditentukan.

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

Seperti yang ditunjukkan oleh BoltClock dalam komentar ( 1 , 2 ), awalnya namespaces hanya diterapkan pada bahasa berbasis XML seperti XHTML, SVG dll, tetapi sesuai spesifikasi terbaru, semua elemen HTML (yaitu, elemen dalam namespace HTML) diberi namespaced http://www.w3.org/1999/xhtml. Firefox mengikuti perilaku ini dan konsisten di semua agen pengguna HTML5. Anda dapat menemukan informasi lebih lanjut dalam jawaban ini .

*|*mewakili pemilih "semua elemen dalam ruang nama apa pun". Menurut W3C , pemilih dibagi menjadi:

ns | E

Di mana ns adalah namespace dan E adalah elemen. Secara default, tidak ada ruang nama yang dideklarasikan. Jadi kecuali namespace dideklarasikan secara eksplisit, *|*dan *akan memilih elemen yang sama.

Dalam CSS, * akan cocok dengan elemen apa pun.

| digunakan untuk mencocokkan elemen tertentu yang dipilih . Keduanya adalah pemilih yang digunakan untuk tujuan pengujian kami