Master CSS Selectors: Panduan Lengkap Permulaan-ke-Pakar-tutorial css-php.cn

Master CSS Selectors: Panduan Lengkap Permulaan-ke-Pakar

Barbara Streisand

Lepaskan： 2024-12-01 07:21:13

asal

407 orang telah melayarinya

Master CSS Selectors: The Complete Beginner-to-Expert Guide

Kuasa Tersembunyi Pemilih CSS: Panduan untuk Pereka Web

pengenalan

CSS (Cascading Style Sheets) ialah asas reka bentuk web moden, membolehkan pembangun mengawal penampilan dan reka letak tapak web. Di tengah-tengah CSS terletak pemilih, yang menentukan elemen pada halaman web yang digayakan. Walaupun pemilih asas seperti div dan h1 terkenal, menguasai pemilih CSS lanjutan boleh meningkatkan permainan reka bentuk web anda dan membantu anda mencipta tapak web yang menakjubkan, cekap dan dinamik.

Dalam panduan komprehensif ini, kami akan menyelami pemilih CSS daripada asas kepada teknik yang paling maju. Setiap bahagian termasuk penjelasan langkah demi langkah dan contoh praktikal untuk membantu walaupun pemula menjadi pakar CSS.

Apakah Pemilih CSS?

Pemilih CSS ialah corak yang digunakan untuk menyasarkan dan menggayakan elemen HTML. Anggap ia sebagai arahan untuk penyemak imbas, memberitahu elemen mana pada halaman harus menerima gaya tertentu.

Sebagai contoh, dalam peraturan CSS ini:

p {
  color: blue;
}

Salin selepas log masuk

P ialah pemilih dan ia menyasarkan semua

elemen, menggunakan warna: biru; gaya kepada mereka.

Asas: Jenis Pemilih CSS

1. Pemilih Universal

Pemilih universal (*) sepadan dengan semua elemen pada halaman.

* {
  margin: 0;
  padding: 0;
}

Salin selepas log masuk

Ini berguna untuk menetapkan semula gaya penyemak imbas lalai.

2. Jenis Pemilih

Mensasarkan teg HTML khusus seperti div, h1 atau p.

h1 {
  font-size: 24px;
}

Salin selepas log masuk

3. Pemilih Kelas

Mensasarkan elemen dengan atribut kelas tertentu.

<div>





<pre class="brush:php;toolbar:false">.highlight {
  background-color: yellow;
}

Salin selepas log masuk

4. Pemilih ID

Mensasarkan elemen dengan id tertentu.

<div>





<pre class="brush:php;toolbar:false">#unique {
  color: red;
}

Salin selepas log masuk

5. Pemilih Kumpulan

Membenarkan menggayakan berbilang pemilih bersama-sama.

h1, h2, p {
  font-family: Arial, sans-serif;
}

Salin selepas log masuk

Beralih ke Pemilih Pertengahan

1. Pemilih Keturunan

Mensasarkan elemen di dalam elemen lain, tidak kira betapa dalam bersarangnya.

div p {
  color: green;
}

Salin selepas log masuk

Ini menyasarkan semua

tag di dalam

elemen.

2. Pemilih Kanak-kanak

Sasarkan kanak-kanak sahaja, menggunakan > simbol.

ul > li {
  list-style-type: square;
}

Salin selepas log masuk

3. Pemilih Adik Beradik Bersebelahan

Mensasarkan elemen pertama serta-merta mengikut elemen yang ditentukan, menggunakan simbol.

h1 + p {
  font-style: italic;
}

Salin selepas log masuk

4. Pemilih Adik Beradik Umum

Mensasarkan semua adik-beradik selepas elemen yang ditentukan, menggunakan simbol ~.

p {
  color: blue;
}

Salin selepas log masuk

Pemilih Lanjutan: Memperkasakan Reka Bentuk Web Moden

1. Pemilih Atribut

Pemilih atribut menyasarkan elemen berdasarkan atribut atau nilai atribut mereka.

Contoh:

Padankan elemen dengan atribut khusus:

* {
  margin: 0;
  padding: 0;
}

Salin selepas log masuk

Padankan elemen dengan nilai atribut tertentu:

h1 {
  font-size: 24px;
}

Salin selepas log masuk

Padankan elemen di mana atribut bermula dengan nilai:

<div>





<pre class="brush:php;toolbar:false">.highlight {
  background-color: yellow;
}

Salin selepas log masuk

2. Kelas Pseudo

Kelas pseudo mentakrifkan keadaan istimewa unsur.

Kelas Pseudo biasa:

:hover: Menggunakan gaya apabila pengguna menuding pada elemen.

<div>





<pre class="brush:php;toolbar:false">#unique {
  color: red;
}

Salin selepas log masuk

:nth-child(n): Menyasarkan elemen berdasarkan kedudukannya dalam ibu bapa.

h1, h2, p {
  font-family: Arial, sans-serif;
}

Salin selepas log masuk

:not(selector): Tidak termasuk elemen daripada pemilihan.

div p {
  color: green;
}

Salin selepas log masuk

3. Unsur Pseudo

Pseudo-elemen menggayakan bahagian tertentu elemen.

Contoh:

::before: Menambah kandungan sebelum elemen.

ul > li {
  list-style-type: square;
}

Salin selepas log masuk

::selepas: Menambah kandungan selepas elemen.

h1 + p {
  font-style: italic;
}

Salin selepas log masuk

4. Kombinator untuk Pemilihan Kompleks

Gabungkan pemilih untuk penyasaran yang berkuasa dan tepat.

Penggabung keturunan:

h1 ~ p {
  color: gray;
}

Salin selepas log masuk

Penggabung kanak-kanak:

input[type] {
  border: 1px solid #000;
}

Salin selepas log masuk

Petua untuk Menggunakan Pemilih Lanjutan

Pastikan Ia Boleh Dibaca: Pemilih yang terlalu kompleks boleh mengelirukan rakan usaha sama.
Optimumkan untuk Prestasi: Penyemak imbas menilai pemilih dari kanan ke kiri, jadi elakkan corak yang terlalu luas.
Uji Secara Tetap: Pastikan pemilih anda menyasarkan elemen yang dimaksudkan merentas pelayar yang berbeza.

Soalan Lazim Mengenai Pemilih CSS

Apakah Perbezaan Antara Pemilih id dan kelas?

Id adalah unik dan digunakan pada satu elemen, manakala kelas boleh digunakan semula untuk berbilang elemen.

Bolehkah saya Menggunakan Berbilang Kelas Pseudo Bersama-sama?

Ya, anda boleh merantai kelas pseudo. Contohnya:

input[type="text"] {
  background-color: lightblue;
}

Salin selepas log masuk

Bagaimanakah Pemilih Atribut Berbanding dengan Kelas?

Pemilih atribut lebih dinamik dan boleh menyasarkan elemen tanpa memerlukan atribut kelas atau id tambahan.

Kesimpulan

Pemilih CSS ialah asas kepada mana-mana reka bentuk web. Dengan menguasainya, anda boleh mengubah tapak web anda menjadi pengalaman yang menarik secara visual dan mesra pengguna. Mulakan dengan asas, terokai pemilih perantaraan dan manfaatkan teknik lanjutan untuk membawa kemahiran anda ke peringkat seterusnya.

Percubaan dengan pemilih ini dan lihat perbezaan yang mereka buat dalam projek anda!

Atas ialah kandungan terperinci Master CSS Selectors: Panduan Lengkap Permulaan-ke-Pakar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!