Analisis mendalam tentang kemahiran aplikasi pemilih lanjutan CSS

Perbincangan mendalam tentang penggunaan pemilih lanjutan CSS, contoh kod khusus diperlukan

CSS, sebagai bahasa helaian gaya, bukan sahaja dapat mencantikkan penampilan halaman web, tetapi juga membolehkan kami mengawal dan mengawal dengan lebih baik pilih elemen halaman web. Dalam CSS, sebagai tambahan kepada pemilih asas (seperti pemilih elemen, pemilih kelas dan pemilih ID), terdapat juga beberapa pemilih lanjutan yang boleh memilih elemen tertentu berdasarkan keadaan yang lebih kompleks. Artikel ini akan menyelidiki penggunaan pemilih lanjutan CSS dan memberikan contoh kod khusus.

1. Pemilih kanak-kanak

Pemilih kanak-kanak boleh memilih elemen anak langsung bagi elemen yang ditentukan. Sintaks ialah "ibu bapa > anak", dengan ibu bapa ialah pemilih elemen induk dan anak ialah pemilih elemen anak.

Sebagai contoh, jika kita ingin memilih elemen anak langsung p di bawah semua elemen div, kita boleh menggunakan kod berikut:

div > p {
  color: red;
}

2. pemilih adik beradik bersebelahan (pemilih adik beradik bersebelahan)

Pemilih adik beradik bersebelahan boleh memilih elemen serta-merta bersebelahan dengan unsur yang ditentukan Unsur adik-beradik di belakang. Sintaks ialah "elemen + sibling", di mana elemen ialah pemilih elemen yang ditentukan dan sibling ialah pemilih elemen sibling.

Sebagai contoh, jika kita ingin memilih elemen p pertama sejurus selepas elemen h1, kita boleh menggunakan kod berikut:

h1 + p {
  color: blue;
}

3. Pemilih adik beradik am (pemilih adik beradik am)

Pemilih adik beradik am boleh memilih selepas elemen yang ditentukan bagi semua elemen saudara. Sintaks ialah "elemen ~ sibling", di mana elemen ialah pemilih elemen yang ditentukan dan sibling ialah pemilih elemen sibling.

Sebagai contoh, jika kita ingin memilih semua elemen p selepas elemen h2, kita boleh menggunakan kod berikut:

h2 ~ p {
  font-size: 16px;
}

4. Pemilih atribut (pemilih atribut)

Pemilih atribut boleh memilih elemen dengan atribut yang ditentukan. Sintaksnya mempunyai banyak bentuk:

• [atribut]: memilih semua elemen dengan atribut yang ditentukan
• [attribute=value]: memilih elemen yang nilai atributnya ialah nilai yang ditentukan
• [attribute~=value]: memilih Elemen atribut yang nilainya mengandungi nilai yang ditentukan
• [attribute|=value]: memilih elemen yang nilai atributnya ialah nilai yang ditentukan atau bermula dengan nilai yang ditentukan
• [attribute^=value]: memilih elemen yang nilai atributnya bermula dengan nilai yang ditentukan;
• [attribute$=value]: Pilih elemen yang nilai atributnya berakhir dengan nilai yang ditentukan
• [attribute*=value]: Pilih elemen yang nilai atributnya mengandungi nilai yang ditentukan.

Sebagai contoh, jika kita ingin memilih semua elemen dengan atribut kelas, kita boleh menggunakan kod berikut:

a[class] {
  text-decoration: underline;
}

5. pemilih kelas pseudo (pemilih kelas pseudo)

Pemilih kelas pseudo boleh memilih elemen dalam keadaan tertentu. Beberapa pemilih kelas pseudo yang biasa digunakan ialah:

• : hover: memilih keadaan tetikus yang melayang di atas elemen
• : memilih elemen yang diklik oleh pengguna
• : melawati: memilih yang dilawati pautan Elemen;
• :anak pertama: Pilih elemen anak pertama bagi elemen induk.

Sebagai contoh, jika kita ingin memilih semua elemen butang yang dilegarkan oleh tetikus, kita boleh menggunakan kod berikut:

button:hover {
  background-color: yellow;
}

6. Pemilih unsur pseudo (pemilih unsur pseudo)

Pemilih unsur pseudo boleh pilih bahagian tertentu unsur, Seperti huruf pertama unsur atau kandungan selepas kandungan. Beberapa pemilih unsur pseudo yang biasa digunakan ialah:

• ::huruf pertama: memilih huruf pertama elemen
• ::baris pertama: memilih baris pertama elemen
• ::sebelum: sebelum elemen Tambah kandungan sebelum kandungan
• ::selepas: tambah kandungan selepas kandungan elemen.

Sebagai contoh, jika kita ingin menetapkan gaya khas untuk huruf pertama perenggan, kita boleh menggunakan kod berikut:

p::first-letter {
  font-size: 24px;
  font-weight: bold;
  color: red;
}

Di atas memperkenalkan beberapa pemilih lanjutan CSS yang biasa digunakan dan cara menggunakannya dengan menggunakan secara rasional pemilih ini, Kami boleh mengawal dan memilih elemen halaman web dengan lebih fleksibel untuk mencapai kesan yang lebih sejuk. Walau bagaimanapun, anda juga harus memberi perhatian kepada isu keserasian dan prestasi pemilih semasa penggunaan untuk mengelakkan menjejaskan kelajuan pemuatan dan pengalaman pengguna halaman web. Saya harap artikel ini boleh membantu semua orang apabila menggunakan pemilih lanjutan CSS!

Atas ialah kandungan terperinci Analisis mendalam tentang kemahiran aplikasi pemilih lanjutan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!