Kumpulan pemilih

Gunakan pemisah koma (,) untuk pemilih kumpulan. Blok pengisytiharan berikut akan digunakan untuk mana -mana elemen yang sepadan dengan mana -mana pemilih dalam kumpulan:

<code class="language-css">td, th {
  /* 声明 */
}</code>

kita boleh merawat koma sebagai pengendali logik "atau", tetapi kita harus ingat bahawa setiap pemilih dalam kumpulan adalah bebas. Kesalahan pemula yang biasa adalah menulis kumpulan seperti ini:

<code class="language-css">#foo td, th {
  /* 声明 */
}</code>

pemula mungkin berfikir bahawa blok pengisytiharan di atas akan digunakan untuk semua keturunan

dan td unsur -unsur elemen dengan id "foo". Walau bagaimanapun, kumpulan pemilih di atas sebenarnya bersamaan dengan: th

<code class="language-css">#foo td {
  /* 声明 */
}
th {
  /* 声明 */
}</code>

Untuk mencapai matlamat sebenar anda, tulis kumpulan pemilih seperti berikut:

<code class="language-css">#foo td, #foo th {
  /* 声明 */
}</code>

Petua penting: Tidak perlu jejak koma jangan tinggalkan koma selepas pemilih terakhir dalam kumpulan!

Soalan Lazim pada kumpulan pemilih CSS

Apakah tujuan kumpulan pemilih CSS?

kumpulan pemilih CSS adalah teknologi CSS yang menggunakan peraturan gaya yang sama untuk beberapa pemilih. Daripada menulis peraturan yang sama untuk pemilih yang berbeza beberapa kali, anda boleh meletakkannya bersama -sama dan menulis peraturan sekali sahaja. Ini bukan sahaja menjadikan kod CSS anda lebih ringkas dan mudah dibaca, tetapi juga mengurangkan saiz fail CSS anda, yang dapat mengurangkan masa beban laman web anda.

Bagaimana untuk mengumpulkan pemilih dalam CSS?

Untuk kumpulan pemilih dalam CSS, cuma senaraikan pemilih untuk dikumpulkan bersama, dipisahkan oleh koma, dan kemudian blok pengisytiharan. Sebagai contoh, jika anda ingin menggunakan gaya yang sama untuk

, h1 dan h2 elemen, anda harus menulisnya seperti berikut: p

<code class="language-css">h1, h2, p {
  color: blue;
}</code>

Ini terpakai biru untuk semua

, h1 dan h2 elemen. p

Bolehkah pelbagai jenis pemilih digabungkan bersama?

Ya, anda boleh menggabungkan apa -apa jenis pemilih bersama -sama, termasuk pemilih elemen, pemilih kelas, pemilih ID, dan banyak lagi. Sebagai contoh, anda boleh menggabungkan pemilih elemen dengan pemilih kelas seperti berikut:

<code class="language-css">h1, .intro {
  color: blue;
}</code>

Ini terpakai biru untuk semua unsur

dan mana -mana elemen dengan kelas "intro". h1

Apa yang berlaku jika pemilih dalam kumpulan mempunyai peraturan gaya yang berbeza?

Jika satu pemilih dalam kumpulan mempunyai peraturan gaya yang berbeza, satu peraturan akan mengatasi peraturan kumpulan. Ini kerana dalam CSS, peraturan yang ditakrifkan terakhir adalah diutamakan. Sebagai contoh, jika anda mempunyai kod berikut:

Elemen

<code class="language-css">h1, h2, p {
  color: blue;
}

p {
  color: red;
}</code>

akan menjadi merah, bukan biru, kerana peraturan individu p berada di belakang peraturan kumpulan. p

Bolehkah pemilih bersarang dalam elemen lain dikelompokkan?

Ya, anda boleh mengumpulkan pemilih bersarang dalam elemen lain. Ini sering digunakan untuk menggunakan gaya ke bahagian tertentu halaman web. Sebagai contoh, anda boleh mengumpulkan pemilih untuk gaya semua

dan div elemen dalam elemen h1, seperti yang ditunjukkan di bawah: p

<code class="language-css">td, th {
  /* 声明 */
}</code>

Ini terpakai biru untuk semua div dan h1 unsur -unsur dalam elemen p.

Bolehkah kelas pseudo dan elemen pseudo digunakan dalam kumpulan pemilih?

Ya, anda boleh menggunakan kelas pseudo dan elemen pseudo dalam kumpulan pemilih. Sebagai contoh, anda boleh mengumpulkan pemilih untuk menetapkan keadaan hover pautan dan gaya pseudo-elemen dari perenggan seperti berikut: before

<code class="language-css">#foo td, th {
  /* 声明 */
}</code>

Ini terpakai biru untuk keadaan hover semua pautan dan

pseudo-elemen semua perenggan. before

Apakah perbezaan antara kumpulan pemilih dan pemilih Chaining?

Pengumpulan pemilih dan pemilih Chaining adalah dua teknik yang berbeza dalam CSS. Apabila anda mengumpulkan pemilih, anda menggunakan peraturan gaya yang sama kepada pemilih berganda. Apabila anda menghubungkan pemilih, anda menggunakan peraturan gaya ke elemen yang sepadan dengan semua pemilih pautan. Sebagai contoh,

adalah kumpulan pemilih, dan h1, h2 adalah pemilih pautan. h1.h2

Bolehkah pemilih dikelompokkan ke dalam pertanyaan media?

Ya, anda boleh mengumpulkan pemilih ke dalam pertanyaan media. Ini berguna untuk menggunakan gaya yang berbeza untuk saiz skrin yang berbeza. Sebagai contoh, anda boleh mengumpulkan pemilih untuk menukar warna unsur -unsur

dan h1 pada skrin kecil, seperti yang ditunjukkan di bawah: p

<code class="language-css">#foo td {
  /* 声明 */
}
th {
  /* 声明 */
}</code>

Apabila saiz skrin adalah 600px atau lebih kecil, ini terpakai biru untuk semua

dan h1 elemen. p

bagaimana untuk debug masalah pemilih kumpulan?

Masalah pemilih kumpulan boleh disahpepijat menggunakan alat pemaju penyemak imbas. Anda boleh menyemak unsur -unsur untuk melihat gaya mana yang sedang digunakan dan pemilih mana yang datang. Jika gaya tidak digunakan seperti yang diharapkan, periksa kesilapan kesilapan dalam pemilih untuk memastikan kekhususan yang betul, dan pastikan gaya tidak ditimpa oleh peraturan lain.

Apakah batasan atau kelemahan menggunakan pemilih kumpulan?

Walaupun pemilih kumpulan boleh membuat CSS anda lebih ringkas dan mudah diurus, mereka juga boleh membuat CSS anda lebih sukar untuk dibaca jika digunakan terlalu banyak. Terlalu banyak pemilih dalam kumpulan boleh membuat sukar untuk memahami apa unsur -unsur gaya yang digunakan. Ia juga harus diingat bahawa semua pemilih dalam kumpulan akan berkongsi kekhususan yang sama, yang mungkin mempengaruhi bagaimana gaya digunakan jika anda mempunyai peraturan yang bertentangan.

Atas ialah kandungan terperinci Kumpulan pemilih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!