Rumah  >  Artikel  >  hujung hadapan web  >  Apakah bentuk pemilih css?

Apakah bentuk pemilih css?

百草
百草asal
2023-12-13 17:13:091011semak imbas

Bentuk pemilih css ialah: 1. Pemilih elemen; 3. Pemilih atribut; 5. Pemilih elemen pseudo; pseudo-class/pseudo-elements digunakan dalam kombinasi. Pengenalan terperinci: 1. Pemilih elemen ialah pemilih paling asas, yang memilih elemen mengikut jenis elemen HTML 2. Pemilih kelas, yang memilih elemen melalui atribut kelas elemen HTML 3. Pemilih ID, Elemen dipilih melalui atribut ID bagi elemen HTML; 4. Pemilih atribut, dsb.

Apakah bentuk pemilih css?

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Pemilih CSS datang dalam pelbagai bentuk, setiap satunya dengan sintaks dan senario aplikasi yang berbeza. Berikut ialah beberapa bentuk pemilih CSS biasa:

1. Pemilih elemen: Pemilih elemen ialah pemilih paling asas, yang memilih elemen berdasarkan jenis elemen HTML. Sebagai contoh, pemilih p akan memilih semua elemen perenggan.

2. Pemilih kelas: Pemilih kelas memilih elemen melalui atribut kelas elemen HTML. Pemilih kelas diwakili menggunakan simbol . Contohnya, pemilih .my-class akan memilih semua elemen dengan nama kelas my-class.

3. Pemilih ID: Pemilih ID memilih elemen melalui atribut ID elemen HTML. Pemilih ID diwakili oleh simbol #, diikuti dengan nama ID. ID adalah unik dalam dokumen HTML, jadi anda boleh menggunakannya untuk menggayakan elemen tertentu. Sebagai contoh, pemilih #my-id akan memilih elemen dengan ID my-id.

4. Pemilih atribut: Pemilih atribut digunakan untuk memilih elemen dengan atribut tertentu. Berikut ialah beberapa contoh pemilih atribut yang biasa digunakan:

  • [atribut]: Memilih semua elemen dengan atribut yang ditentukan.
  • [attribute=value]: Pilih semua elemen dengan atribut dan nilai yang ditentukan.
  • [attribute~=value]: Memilih semua elemen dengan nilai atribut yang ditentukan (dipisahkan oleh ruang). Sebagai contoh, pemilih a[href] akan memilih semua elemen pautan dengan atribut href dan pemilih a[href="example.com"] akan memilih semua elemen pautan dengan nilai atribut href "example.com".

5. Pemilih kelas pseudo dan unsur pseudo: Pemilih elemen pseudo dan unsur pseudo digunakan untuk memilih elemen atau bahagian tertentu elemen dalam keadaan tertentu. Berikut ialah beberapa contoh kelas pseudo dan pemilih unsur pseudo yang biasa digunakan:

  • :hover: Memilih elemen pada tetikus.
  • :aktif: Pilih elemen yang diaktifkan oleh pengguna.
  • :dilawati: Pilih elemen pautan yang telah dilawati oleh pengguna.
  • ::sebelum dan ::selepas: Sisipkan kandungan sebelum atau selepas kandungan elemen. Contohnya, pemilih :hover akan memilih semua elemen pautan pada tetikus, dan a::before { content: "text" } akan memasukkan beberapa teks sebelum kandungan semua elemen pautan.

6. Pemilih gabungan: Pemilih gabungan membolehkan anda memilih elemen berdasarkan hubungannya dengan elemen lain. Berikut ialah beberapa contoh pemilih gabungan yang biasa digunakan:

  • Penggabung kanak-kanak: Dua elemen dipisahkan oleh ruang, menunjukkan bahawa elemen pertama ialah anak langsung kepada elemen kedua. Sebagai contoh, pemilih p a akan memilih semua elemen pautan yang terkandung terus dalam perenggan.
  • Penggabung turunan: Dua elemen dipisahkan oleh ruang, menunjukkan bahawa unsur pertama boleh menjadi mana-mana unsur turunan unsur kedua. Sebagai contoh, pemilih p a akan memilih semua elemen pautan yang terkandung dalam perenggan, tidak kira sejauh mana ia turun.
  • Penggabung adik beradik bersebelahan: Dua elemen dipisahkan dengan simbol +, menunjukkan bahawa elemen pertama ialah elemen adik beradik seterusnya bagi elemen kedua dan mempunyai unsur induk yang sama. Sebagai contoh, pemilih p + a akan memilih semua elemen pautan sejurus selepas perenggan.
  • Penggabung bersaudara am: Dua elemen dipisahkan oleh ruang, menunjukkan bahawa elemen pertama boleh menjadi mana-mana elemen adik-beradik bagi elemen kedua. Sebagai contoh, p ~ a pemilih akan memilih semua elemen pautan yang mengikuti perenggan, tidak kira berapa banyak elemen adik beradik lain mendahuluinya.

7. Gunakan pemilih atribut dalam kombinasi dengan pseudo-class/pseudo-elements: Anda juga boleh menggunakan pemilih atribut dalam kombinasi dengan pseudo-class/pseudo-element untuk mencipta peraturan yang lebih kompleks. Sebagai contoh, anda boleh menggunakan :hover a[href] untuk memilih elemen pautan yang mempunyai atribut href pada tetikus.

Di atas adalah beberapa bentuk pemilih biasa CSS, tetapi sebenarnya CSS juga menyediakan sintaks pemilih yang lebih maju dan kompleks, yang boleh digunakan secara fleksibel mengikut keperluan khusus.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn