Apakah gabungan CSS? Terangkan jenis yang berbeza (keturunan, anak, adik bersebelahan, adik -beradik umum).

Apakah gabungan CSS? Terangkan jenis yang berbeza (keturunan, anak, adik bersebelahan, adik -beradik umum).

Gabungan CSS digunakan untuk menentukan hubungan antara dua pemilih dalam set peraturan CSS. Mereka membantu mensasarkan unsur -unsur tertentu dalam struktur HTML berdasarkan kedudukan relatif mereka kepada unsur -unsur lain. Terdapat empat jenis utama CSS Combinators:

<li> Kombinator Descendant (ruang) :
Gabungan keturunan diwakili oleh ruang antara dua pemilih. Ia memilih semua elemen yang menjadi keturunan elemen yang ditentukan, yang bermaksud unsur -unsur yang dipilih boleh menjadi anak langsung atau lebih jauh ke hierarki.
Contoh: div p Memilih semua <p></p> elemen yang merupakan keturunan elemen <div> .<li> <strong>Combinator Child (>)</strong> :<br> Gabungan kanak -kanak dilambangkan oleh simbol <code>> . Ia memilih unsur -unsur yang merupakan kanak -kanak langsung dari elemen yang ditentukan. Ini lebih spesifik daripada penggabungan keturunan kerana ia hanya mensasarkan unsur -unsur satu tahap ke dalam hierarki.
Contoh: div > p Memilih semua <p></p> elemen yang merupakan kanak -kanak langsung dari elemen <div> .<li> <strong>Kombinator adik bersebelahan ()</strong> :<br> Gabungan saudara bersebelahan diwakili oleh<code> simbol. Ia memilih elemen yang segera didahului oleh elemen tertentu yang lain. Kedua -dua elemen mesti berkongsi ibu bapa yang sama.
Contoh: h2 p Memilih elemen <p></p> pertama yang secara langsung mengikuti elemen <h2></h2> , kedua -duanya menjadi adik beradik. <li> Kombinator adik -beradik umum (~) :
Kombinator saudara umum dilambangkan oleh simbol ~ . Ia memilih unsur -unsur yang adik -beradik elemen yang ditentukan, tetapi tidak semestinya mengikutinya. Seperti gabungan saudara bersebelahan, unsur -unsur ini mesti berkongsi ibu bapa yang sama.
Contoh: h2 ~ p Memilih semua <p></p> elemen yang mengikuti elemen <h2></h2> , tanpa mengira sama ada unsur -unsur lain datang di antara mereka.

Bagaimanakah saya boleh menggunakan kombinasi CSS untuk menargetkan elemen tertentu dalam struktur HTML saya?

Gabungan CSS tidak ternilai untuk menargetkan unsur -unsur dalam struktur HTML anda. Berikut adalah cara anda boleh menggunakan setiap jenis dengan berkesan:

<li> Gabungan Keturunan :
Sekiranya anda perlu gaya elemen yang bersarang dalam unsur -unsur lain, tanpa mengira kedalaman mereka, anda boleh menggunakan Gabungan Keturunan. Sebagai contoh, jika anda ingin gaya semua <a></a> tag di dalam elemen <nav></nav> , anda akan menulis nav a . Ini mensasarkan semua tag utama yang merupakan keturunan elemen <nav></nav> . <li> Gabungan Anak :
Gunakan Combinator Kanak -kanak apabila anda perlu menargetkan unsur -unsur yang merupakan kanak -kanak langsung dari elemen tertentu. Sebagai contoh, untuk gaya hanya tag <li> yang merupakan kanak-kanak langsung dari <ul></ul> dengan main-list kelas, anda akan menggunakan ul.main-list > li . Ini memastikan bahawa hanya kanak -kanak yang terdekat <li> unsur -unsur yang disasarkan. <li> Kombinator adik bersebelahan :
Gabungan saudara bersebelahan adalah sempurna untuk menggayakan elemen yang segera mengikuti elemen tertentu. Sebagai contoh, jika anda ingin menambah margin ke perenggan pertama yang mengikuti tajuk, anda boleh menggunakan h2 p . Ini akan menambah gaya hanya ke tag <p></p> secara langsung mengikuti tag <h2></h2> . <li> Kombinator adik -beradik umum :
Gunakan gabungan saudara umum untuk memohon gaya untuk semua elemen yang mengikuti elemen tertentu, tetapi tidak semestinya bersebelahan. Sebagai contoh, untuk gaya semua <div> elemen mengikuti elemen <code><article></article> , anda boleh menggunakan article ~ div . Ini akan mensasarkan semua unsur
berikutnya tanpa mengira unsur -unsur lain di antara mereka.

Apakah perbezaan utama antara kanak -kanak dan penggabungan keturunan dalam CSS?

Perbezaan utama antara kanak -kanak dan penggabungan keturunan terletak pada tahap kekhususan dan struktur yang mereka targetkan:

<li>

Combinator Child (>) :

<li> Sasaran hanya kanak -kanak langsung dari elemen. <li> Ia lebih spesifik kerana ia hanya melihat tahap segera di bawah ibu bapa. <li> Berguna apabila anda ingin memohon gaya ke unsur -unsur yang bersambung secara langsung tanpa mempertimbangkan unsur -unsur lebih jauh ke bawah hierarki. <li> Contoh: ul > li memilih <li> unsur -unsur yang langsung kanak -kanak <ul></ul> .
<li>

Kombinator Descendant (ruang) :

<li> Mensasarkan sebarang elemen yang menjadi keturunan elemen yang ditentukan, termasuk kanak -kanak langsung dan unsur -unsur ke bawah pokok itu. <li> Kurang spesifik kerana ia menganggap semua peringkat di bawah ibu bapa. <li> Berguna untuk menggunakan gaya kepada unsur -unsur yang bersarang dalam elemen lain, tanpa mengira kedalaman mereka dalam hierarki. <li> Contoh: ul li memilih semua <li> unsur -unsur yang menjadi keturunan <ul></ul> , termasuk yang di dalam bersarang <ul></ul> elemen.

CSS Combinator mana yang harus saya gunakan untuk memilih unsur -unsur yang adik -beradik segera?

Untuk memilih unsur -unsur yang adik -beradik segera, anda harus menggunakan kombinasi saudara bersebelahan () .

Gabungan saudara bersebelahan direka khusus untuk menargetkan elemen yang secara langsung mengikuti elemen lain dalam ibu bapa yang sama. Sebagai contoh, jika anda ingin gaya elemen <p></p> yang segera mengikuti elemen <h2></h2> , anda akan menggunakan pemilih h2 p . Ini memastikan bahawa hanya elemen <p></p> secara langsung selepas <h2></h2> dipilih, dan tidak ada unsur -unsur <p></p> lain yang mungkin diikuti kemudian.