Apakah pemilih lanjutan css?

pemilih lanjutan css termasuk "pemilih adik beradik sejagat~", "pemilih atribut []", "pemilih kelas pseudo: bukan()", "pemilih kelas pseudo: kanak-kanak ke-n()", "kelas pseudo" Pemilih : nth-of-type()", "Pseudo-class selector: first-child and: last-child": 1. Pemilih adik beradik sejagat, memilih semua elemen yang mempunyai elemen induk yang sama dengan elemen yang ditentukan, dan semua elemen yang ikutinya. Elemen yang serupa 2. Pemilih atribut, anda boleh memilih elemen berdasarkan nilai atributnya, dsb.

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

Pemilih lanjutan CSS menyediakan cara yang lebih halus dan fleksibel untuk memilih elemen Berikut ialah beberapa pemilih lanjutan CSS biasa:

1. Pemilih adik-beradik umum: Gunakan tilde (~) untuk menunjukkan semua elemen adik-beradik yang mempunyai elemen induk yang sama sebagai elemen yang ditentukan dan serta-merta mengikutinya.

h2 ~ p { color: red; }

2. Pemilih atribut: Anda boleh memilih elemen berdasarkan nilai atributnya.

   • Atribut wujud pemilih: [attr]
   • Pemilih sama: [attr=value]
   • Mengandungi pemilih: [attr~=value]
   • Mulakan padanan pemilih: [attr^=value selector]
   nd
   • attr$=value]
   • Mengandungi pemilih: [attr*=value]

3. :not() Pemilih kelas pseudo: memilih semua elemen kecuali elemen yang ditentukan.

p:not(.intro) { color: red; }

4. :nth-child() Pemilih kelas pseudo: Pilih elemen berdasarkan kedudukannya dalam elemen induk.

p:nth-child(odd) { background-color: lightgray; }

5. :nth-of-type() pseudo-class selector: serupa dengan :nth-child(), tetapi hanya sepadan dengan elemen jenis tertentu.

p:nth-of-type(2n+1) { font-weight: bold; }

6. :pemilih kelas pseudo anak pertama dan :anak terakhir: pilih elemen anak pertama dan terakhir masing-masing.

div p:first-child { font-weight: bold; }

Pemilih lanjutan ini boleh membantu pembangun memilih elemen yang perlu digayakan dengan lebih tepat, sekali gus mencapai kawalan gaya yang lebih fleksibel dan halus.

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