Memahami Pemilih Adik Beradik CSS: Panduan Pemula

CSS menyediakan pelbagai pilihan pemilih untuk menyasarkan elemen tertentu dalam dokumen HTML. Walaupun pemilih kelas dan ID biasanya digunakan, mereka tidak boleh sentiasa menyasarkan elemen berdasarkan hubungannya dengan elemen lain. Di sinilah pemilih adik beradik CSS memainkan peranan.

Pemilih adik beradik CSS adalah penting untuk mencipta reka letak web yang canggih dan fleksibel, membolehkan anda menggayakan elemen berdasarkan kedudukan relatifnya kepada elemen lain. Ia amat berguna apabila reka bentuk bergantung pada peletakan elemen dan menggunakan pelbagai penggabung, seperti Penggabung Keturunan, Penggabung Anak, Penggabung Adik Bersebelahan dan banyak lagi. Pendekatan ini membolehkan anda menggunakan gaya pada elemen tertentu tanpa menambah kelas atau ID tambahan, mengurangkan kekacauan kod.

Apakah Pemilih Adik Beradik CSS?

Pemilih adik beradik CSS digunakan untuk memilih elemen yang merupakan adik beradik (berkongsi elemen induk yang sama), iaitu, ia membantu anda memilih elemen HTML berdasarkan hubungannya dengan elemen lain yang berkongsi induk yang sama. Penggabung ini ialah simbol unik yang membantu penyemak imbas memahami hubungan antara elemen HTML.

Terdapat dua jenis pemilih adik beradik CSS:

• Pemilih adik beradik bersebelahan ( )

• Pemilih adik beradik am (-)

Inilah sebabnya pemilih adik beradik CSS adalah penting untuk pembangun web:

• Kekhususan Dipertingkat: Berbanding dengan pemilih generik, pemilih adik beradik membenarkan penggayaan elemen yang lebih tepat. Ini meningkatkan kebolehselenggaraan dan penyusunan kod CSS anda.

• Reka Letak Dinamik: Dengan memfokuskan pada kedudukan item berbanding adik-beradik, anda boleh membangunkan reka letak yang menyesuaikan diri dengan struktur kandungan. Bayangkan menggayakan anak pertama dan terakhir bekas secara berbeza.

• Perhubungan Visual: Ia membolehkan anda mencipta hubungan visual antara item. Fikirkan tentang menyerlahkan kapsyen diikuti dengan imej yang sepadan atau menambah sempadan antara bahagian bersebelahan.

• Pengulangan Kod Dikurangkan: Apabila anda perlu menggayakan elemen bergantung pada kedudukannya dalam bekas tertentu, pemilih adik-beradik boleh menghapuskan keperluan untuk tugasan kelas berulang, menghasilkan kod yang lebih bersih.

• Kecekapan: Ia boleh menghasilkan CSS yang lebih cekap dengan meminimumkan lebihan. Daripada menulis banyak peraturan untuk menyasarkan item tertentu dalam keadaan yang berbeza, pemilih adik beradik membenarkan anda menulis peraturan CSS yang mudah dan boleh digunakan semula yang menyesuaikan diri dengan struktur dokumen.

• Reka Bentuk Responsif: Ia boleh menjadi sangat berguna dalam reka bentuk web responsif. Mereka membenarkan anda melaraskan reka letak atau rupa item berdasarkan hubungannya dengan orang lain, yang penting untuk memberikan pengalaman pengguna yang konsisten merentas beberapa peranti dan saiz skrin.

Pemilih adik beradik CSS membolehkan anda maju melangkaui pendekatan penggayaan berasaskan elemen semata-mata. Ia membolehkan anda memanfaatkan struktur hierarki HTML untuk menghasilkan pengalaman pengguna yang lebih konsisten dan menarik secara visual.

Jenis Pemilih Adik Beradik CSS

Terdapat dua jenis pemilih adik beradik CSS: pemilih bersebelahan dan umum. Kedua-duanya penting dalam membenarkan pembangun menyasarkan elemen berdasarkan hubungan adik-beradik mereka, tetapi ia beroperasi secara berbeza.

Rajah di atas menunjukkan pemilih adik-beradik dalam CSS dan cara mereka menyasarkan elemen.

Pemilih Adik Beradik Bersebelahan ( )

Pemilih adik beradik bersebelahan, diwakili oleh simbol tambah ( ), membolehkan anda menyasarkan elemen serta-merta selepas elemen lain dengan elemen induk yang sama. Ini bermakna ia hanya akan menyasarkan elemen adik beradik pertama yang muncul terus selepas elemen yang ditentukan, membenarkan penggayaan yang tepat dan sensitif konteks tanpa kelas atau ID tambahan.

Pemilih ini memberikan tahap ketepatan yang tinggi, membolehkan anda menggayakan elemen berdasarkan kedudukan tepatnya di dalam struktur HTML.

Sintaks:

    element1 + element2 {
      /* CSS styles */
    }

Dalam sintaks ini:

• elemen1: Mewakili elemen yang mendahului elemen sasaran.

• elemen2: Mewakili elemen yang anda mahu gayakan, yang mesti mengikut terus elemen1.

• Tanda tambah ( ): Bertindak sebagai penggabung, menandakan hubungan khusus antara unsur-unsur.

Kegunaan:

Seperti yang dinyatakan sebelum ini, pemilih ini menyasarkan elemen serta-merta mengikuti elemen lain yang ditentukan. Ini berguna apabila anda menggayakan elemen berdasarkan adik beradik langsungnya.

• Menggayakan Elemen Borang: Apabila pengguna memfokuskan pada medan input, anda mungkin mahu menyerlahkan label serta-merta mengikutinya.

    input:focus + label {
      color: blue;
    }

• Pemformatan Kandungan: Anda boleh menggunakan pemformatan khas pada perenggan yang mengikuti tajuk.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Contoh: Halaman Blog LambdaTest

Mari kita pertimbangkan contoh daripada halaman blog LambdaTest untuk menunjukkan penggunaan pemilih adik beradik yang bersebelahan.

Mari kita pecahkan contoh berbeza di mana pemilih adik beradik bersebelahan digunakan:

    element1 + element2 {
      /* CSS styles */
    }

Ini menyasarkan item senarai (

) diletakkan serta-merta selepas elemen dengan kelas .platform. Dalam menu navigasi, peraturan ini meletakkan elemen dengan kelas .enterprise (yang datang betul-betul selepas .platform) untuk digayakan dengan kedudukan: relatif. Ini membolehkan menu lungsur turun dalam elemen .enterprise diletakkan menggunakan kedudukan mutlak.

    input:focus + label {
      color: blue;
    }

Ini menyasarkan elemen butang yang diletakkan sejurus selepas butang dengan kelas .log masuk. Ia menetapkan gaya (lapik, jidar, dsb.) khusus untuk butang kedua, mewujudkan perbezaan visual yang berbeza antara log masuk dan butang berikut.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Ini menyasarkan elemen bekas input carian yang diletakkan sejurus selepas elemen dengan kelas .bekas butang. Ia menetapkan gaya bekas input carian (lebar, kedudukan, dll.).

    .platform + li {
        position: relative;
    }

Ini adalah kes penggunaan yang berbeza sedikit. Di sini, pemilih adik beradik bersebelahan menyasarkan .ikon carian *elemen, tetapi hanya apabila elemen *.search-input mempunyai fokus (apabila pengguna mengklik di dalam bar carian). Dengan cara ini, anda boleh menukar warna dan saiz ikon untuk memberikan maklum balas visual kepada pengguna apabila berinteraksi dengan input carian.

Pemilih Adik Beradik Umum (~)

Pemilih adik beradik am, yang diwakili oleh simbol tilde (~), membolehkan anda menyasarkan dan menggayakan elemen yang berkongsi induk yang sama dan mengikut elemen yang ditentukan. Tidak seperti pemilih adik beradik bersebelahan, yang hanya menyasarkan adik beradik terdekat, pemilih adik beradik am mempengaruhi semua adik beradik seterusnya.

Sintaks:

Sintaks untuk pemilih adik beradik am ialah:

    .login + button {
        padding: 12px 15px;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #eee;
    }

Dalam sintaks ini:

• **elemen1: **Mewakili elemen rujukan.

• elemen2: Mewakili elemen sasaran, yang mengikut elemen1 dan berkongsi induk yang sama.

Pemilih adik beradik am berguna apabila anda menggayakan komponen yang berkaitan dengan struktur HTML tetapi tidak semestinya bersebelahan antara satu sama lain. Contohnya, anda boleh menggunakannya untuk menggayakan semua perenggan yang mengikuti

elemen teg HTML, walaupun terdapat elemen lain di antaranya.

Kegunaan:

Pemilih adik-beradik umum menyasarkan semua adik-beradik unsur tertentu yang berkongsi ibu bapa yang sama, tanpa mengira kedudukan mereka.

• Pautan Navigasi: Gunakan pemilih adik beradik umum untuk menggayakan mana-mana pautan navigasi yang mengikuti pautan yang diserlahkan.

    element1 + element2 {
      /* CSS styles */
    }

• Senarai Penggayaan: Jika anda ingin menggayakan semua item senarai selepas item tertentu, gunakan pemilih adik beradik am.

    input:focus + label {
      color: blue;
    }

• Bahagian Tema: Gunakan gaya berbeza pada semua bahagian yang mengikuti bahagian tertentu dalam induk yang sama dalam dokumen.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Contoh: Halaman Dokumen LambdaTest

Dalam contoh Halaman Dokumen LambdaTest, pemilih adik-beradik umum menggayakan semua elemen yang mengikuti div .docs-title dalam bahagian .docs-category . Pendekatan ini membantu membezakan pautan daripada kandungan lain dan mencipta reka letak berstruktur. Ia memastikan semua pautan berkaitan dikumpulkan secara visual dan digayakan secara konsisten, mengekalkan reka bentuk yang bersih dan teratur.

Dalam contoh di atas, peraturan CSS, .docs-title ~ a *mensasarkan semua *anchor () elemen yang datang selepas .docs-title div. Gaya yang digunakan termasuk paparan blok, jidar untuk jarak dan warna teks tertentu, saiz dan berat.

Memahami dua pemilih adik-beradik ini membolehkan penggayaan yang lebih disasarkan dan dinamik pada halaman web anda. Walau bagaimanapun, adakah pemilih adik beradik CSS serasi dengan semua penyemak imbas?

Keserasian Pelayar

Pemilih adik beradik CSS dengan penggabung disokong secara meluas merentas penyemak imbas moden, termasuk Chrome, Firefox, Safari dan Edge. Walau bagaimanapun, adalah amalan yang baik untuk menyemak keserasian dengan versi penyemak imbas yang lebih lama dan menguji tapak web anda pada penyemak imbas yang berbeza untuk memastikan tingkah laku yang konsisten.

Untuk menguji gaya tapak web anda merentas pelbagai penyemak imbas dan memastikan semuanya berfungsi seperti yang diharapkan, pertimbangkan untuk menggunakan platform berasaskan awan seperti LambdaTest. Ia ialah platform pelaksanaan ujian dikuasakan AI yang membolehkan anda menjalankan ujian keserasian penyemak imbas manual dan automatik pada skala merentas 3000 penyemak imbas dan gabungan OS.

Amalan dan Pertimbangan Terbaik

Menggunakan pemilih adik beradik CSS boleh meningkatkan reka bentuk tapak web anda. Namun, mengikut amalan terbaik dan mengetahui pertimbangan tertentu adalah penting untuk memastikan helaian gaya CSS anda kekal cekap dan boleh diselenggara.

Gabungkan Pemilih untuk Kekhususan

Pemilih adik beradik CSS menawarkan kekhususan yang lebih rendah daripada kelas dan ID. Ini bermakna jika terdapat peraturan gaya yang bercanggah dengan kekhususan yang lebih tinggi, peraturan yang lebih khusus diutamakan. Berhati-hati tentang konflik dan pastikan gaya pemilih adik-beradik anda menyasarkan komponen yang betul.

Pilihan adik beradik boleh digabungkan dengan Pemilih CSS lain untuk meningkatkan kekhususan dan mengelakkan konflik. Ini boleh menghalang gaya daripada digunakan dalam keadaan yang tidak diingini.

    element1 + element2 {
      /* CSS styles */
    }

Elakkan Penggunaan Terlalu Banyak Pemilih Adik Beradik

Penggunaan pemilih adik beradik yang berlebihan boleh menjadikan CSS lebih sukar untuk dibaca dan diurus. Cuba permudahkan dan jelaskan helaian gaya anda untuk menjadikannya lebih mudah difahami. Pertimbangkan untuk menggunakan kelas atau item bersarang untuk senario penyasaran yang lebih canggih.

    input:focus + label {
      color: blue;
    }

Hadkan Skop Pemilih

Elakkan menggunakan pemilih yang terlalu luas yang mungkin secara tidak sengaja menggayakan lebih banyak elemen daripada yang dimaksudkan. Contohnya, gunakan .nav-item ~ .nav-item bukannya div ~ div untuk memastikan anda menyasarkan elemen yang berkaitan sahaja.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Pastikan Responsif dan Keserasian

Memastikan tapak web anda kelihatan menarik dan berfungsi dengan betul merentas semua peranti dan penyemak imbas adalah penting. Semasa menggunakan pemilih adik beradik CSS dalam konteks tertentu, adalah penting untuk mengutamakan responsif dan keserasian yang luas.

Berikut ialah beberapa pertimbangan penting:

• **Pertanyaan Media: **Gunakan pertanyaan media untuk menyesuaikan gaya anda berdasarkan saiz skrin dan orientasi peranti. Ini memastikan reka letak tapak web anda disesuaikan untuk tontonan optimum pada desktop, komputer riba, tablet dan telefon pintar. Untuk mengesahkan reka bentuk responsif merentas pelbagai peranti dan penyemak imbas, gunakan Pelayar LT yang ditawarkan oleh LambdaTest. Alat ujian tapak web mudah alih ini membolehkan anda menguji tapak anda pada 53 port pandangan peranti, memastikan pengalaman pengguna yang konsisten dan positif merentas peranti yang berbeza.

Pertanyaan media CSS di bawah menyasarkan gaya untuk skrin selebar 992 piksel atau kurang, biasanya termasuk tablet dan telefon pintar dalam mod potret. Dalam pertanyaan media ini, anda boleh melaraskan ketinggian badan kepada auto dan menetapkan ketinggian .logo-container img kepada 40px, antara perubahan lain.

Coretan kod di bawah ialah contoh pertanyaan media yang melaraskan reka letak bahagian catatan blog untuk skrin 992 piksel lebar atau lebih kecil. Ia menetapkan .blog-image-text-container *untuk dipaparkan sebagai bekas fleksibel dengan arah lajur dan melaraskan lebarnya kepada 100%. Imej di dalam *.blog-image-container *digayakan dengan lebar 100% dan ketinggian auto. Selain itu, *.jadual-kandungan *disembunyikan menggunakan *paparan: tiada.

Keputusan:

Hasil di atas ditunjukkan pada Penyemak Imbas LT untuk mengesahkan responsif tapak web anda melalui peranti desktop, mudah alih dan tablet.

Untuk mula menggunakan Pelayar LT dan menguji responsif aplikasi anda, cuma klik butang muat turun di bawah.

Tonton video di bawah untuk mengetahui lebih lanjut tentang Penyemak Imbas LT dan cara untuk bermula.

• Keserasian Pelayar: Uji kefungsian dan penampilan tapak web anda merentas berbilang penyemak imbas untuk memastikan gaya dan reka letak anda dipaparkan secara konsisten. Penyemak imbas mungkin mentafsir kod CSS sedikit berbeza, jadi ujian membantu mengenal pasti dan menangani ketidakkonsistenan. Seperti yang dipelajari di atas, anda boleh menggunakan LambdaTest untuk melakukan ujian silang penyemak imbas untuk mengesahkan sama ada tapak web anda disokong merentas pelbagai penyemak imbas dan berfungsi seperti yang diharapkan.

Dengan mengutamakan responsif dan keserasian, anda boleh membina tapak web yang menyediakan pengalaman pengguna yang lancar untuk semua pengguna, tanpa mengira peranti atau penyemak imbas mereka.

Gunakan Kelas untuk Kejelasan

Pemilih adik beradik CSS berguna untuk menyasarkan item berdasarkan kedudukan mereka dalam struktur HTML; walau bagaimanapun, menggunakannya secara berlebihan boleh mengakibatkan kod yang kurang boleh diselenggara. Menggunakan kelas boleh membantu dengan kebolehbacaan kod dan kebolehselenggaraan jangka panjang.

Bayangkan senario di mana anda menggunakan pemilih adik-beradik seperti:

    element1 + element2 {
      /* CSS styles */
    }

Kod ini segera menyasarkan semua elemen mengikut elemen

. Pertimbangkan halaman dengan banyak bahagian yang mengandungi

dan untuk ringkasan.

Menggunakan pemilih adik beradik CSS di sini menjadi kurang jelas. Apakah yang berlaku jika anda menambah elemen lain antara

dan

*dalam bahagian tertentu? Pemilih adik beradik CSS mungkin tidak lagi menyasarkan *

yang dimaksudkan untuk bahagian tersebut.

Menggunakan kelas, anda boleh menentukan hubungan antara elemen, menjadikan kod CSS anda boleh dibaca dan diselenggara. Begini cara ia boleh dilakukan:

HTML:

    input:focus + label {
      color: blue;
    }

CSS:

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Dalam contoh ini, anda boleh memasukkan kelas seperti .article-section, .article-title, .article-summary, dsb. gaya CSS sekarang menyasarkan kelas khusus ini, menjadikan kod lebih jelas dan lebih mudah difahami. Menggunakan kelas meningkatkan kebolehbacaan kod, kebolehselenggaraan dan penggunaan semula.

Menggunakan kaedah ini memastikan kod CSS anda boleh diselenggara apabila tapak web anda berkembang. Ingat bahawa kod yang jelas dan teratur menjimatkan masa dalam jangka panjang dan memudahkan kerjasama dengan pembangun lain.

Kesimpulan

Kesimpulannya, pemilih adik-beradik ialah ciri CSS yang berkesan yang membolehkan pembangun membangunkan gaya yang canggih dan dinamik berdasarkan perhubungan item. Blog ini memfokuskan pada dua jenis pemilih adik beradik: bersebelahan ( ) dan umum (~).

Untuk menunjukkan utiliti pemilih adik beradik, kami menyemak asas, menyertakan contoh praktikal dan melihat aplikasi dunia sebenar. Selain itu, kami telah menekankan amalan dan pertimbangan terbaik untuk memastikan CSS anda cekap dan terurus.

Memahami dan menggunakan pemilih adik beradik bersebelahan dan dengan betul membolehkan anda memperbaik reka bentuk web anda dan membangunkan reka letak yang lebih canggih dan menarik secara visual. Untuk mencapai hasil yang terbaik, uji gaya anda dengan betul dan pastikan kod anda bersih dan teratur.

Selamat Pengekodan!

Atas ialah kandungan terperinci Memahami Pemilih Adik Beradik CSS: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!