Sifat pemilih CSS lanjutan: kelas pseudo dan elemen pseudo

Atribut pemilih CSS lanjutan: pseudo-class dan pseudo-elements

Pengenalan:
Dalam CSS, pemilih ialah konsep penting, yang boleh membantu pembangun memilih elemen DOM dan menggunakan gaya dengan tepat. Selain pemilih elemen biasa (seperti pemilih teg dan pemilih kelas), CSS juga menyediakan dua atribut pemilih, kelas pseudo dan elemen pseudo, yang boleh meningkatkan lagi kefungsian pemilih. Artikel ini akan memperkenalkan penggunaan kelas pseudo dan elemen pseudo, serta menyediakan contoh kod khusus, dengan harapan dapat membantu pembaca memahami dan menggunakan kedua-dua atribut ini dengan lebih baik.

1. Kelas Pseudo:
Kelas Pseudo ialah pemilih CSS yang boleh memilih elemen di bawah keadaan atau syarat tertentu. Kelas pseudo biasa termasuk :hover (legar tetikus), :visited (pautan telah dilawati), :focus (dapatkan fokus), dsb. Berikut ialah beberapa contoh penggunaan kelas pseudo:

1. Gaya alih tetikus:
   :tuding digunakan untuk memilih gaya yang tetikus melayang di atas elemen. Contohnya, kita boleh menetapkan gaya tetikus untuk butang:

button:hover {
  background-color: red;
}

2. Gaya pautan yang dilawati:
   :Gaya yang dilawati untuk memilih pautan yang dilawati. Sebagai contoh, kita boleh menggariskan pautan yang dilawati:

a:visited {
  text-decoration: underline;
}

3. Dapatkan gaya fokus:
   :fokus Gaya digunakan untuk memilih elemen yang mempunyai fokus pada masa ini. Sebagai contoh, kita boleh menambah gaya pada kotak input apabila ia mendapat fokus:

input:focus {
  outline: 2px solid blue;
}

2. Pseudo-elements:
Pseudo-elements ialah pemilih CSS lain yang boleh memilih bahagian tertentu elemen DOM. Elemen pseudo biasa termasuk ::sebelum (masukkan kandungan sebelum elemen), ::selepas (masukkan kandungan selepas elemen), dsb. Berikut ialah beberapa contoh penggunaan unsur pseudo:

1. Sisipkan kandungan:
   ::sebelum dan ::selepas digunakan untuk memasukkan kandungan tertentu sebelum atau selepas kandungan elemen. Sebagai contoh, kita boleh menambah kurungan sebelum dan selepas perenggan:

p::before {
  content: "(";
}

p::after {
  content: ")";
}

2. Apungan jelas:
   ::selepas juga biasa digunakan untuk membersihkan terapung. Apabila elemen induk mengandungi elemen terapung, anda boleh gunakan ::after untuk menambah kandungan kosong padanya dan kosongkan float dengan menetapkan atribut jelas:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3. Ubah suai gaya huruf pertama:
   ::huruf pertama ialah digunakan Huruf pertama dalam elemen dipilih dan gaya boleh digunakan. Sebagai contoh, kita boleh menetapkan huruf pertama kepada huruf besar:

p::first-letter {
  text-transform: uppercase;
}

Kesimpulan:
Pseudo-class dan pseudo-element ialah atribut penting dalam CSS untuk meningkatkan lagi fungsi pemilih Ia boleh membantu pembangun memilih elemen DOM dengan tepat dan digunakan gaya. Dalam pembangunan sebenar, kita boleh memilih untuk menggunakan kelas pseudo dan elemen pseudo mengikut keperluan khusus untuk mencapai kesan gaya yang lebih kaya. Melalui pengenalan dan contoh kod artikel ini, saya percaya bahawa pembaca mempunyai pemahaman awal tentang pseudo-class dan pseudo-elements, dan saya berharap ia dapat membantu pembaca menguasai dan menggunakan kedua-dua atribut ini dengan lebih baik.

Atas ialah kandungan terperinci Sifat pemilih CSS lanjutan: kelas pseudo dan elemen pseudo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!