Apakah yang dimaksudkan dengan kelas pseudo css3 dan elemen pseudo?

Dalam CSS3, pseudo-class ialah pemilih yang digunakan untuk menambah gaya yang sepadan dengan elemen sedia ada apabila ia berada dalam keadaan tertentu, dan keadaan ini berubah secara dinamik berdasarkan tingkah laku pengguna manakala pseudo-elements Maksud "elemen palsu"; atau "elemen penyamaran", ia ialah pemilih yang digunakan untuk mencipta beberapa elemen yang tiada dalam pepohon DOM dan menambah gaya padanya.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Apakah itu pseudo-class?

Pseudo-class ialah jenis yang digunakan apabila elemen sedia ada berada dalam keadaan tertentu ( Gelongsor, klik, dsb.) menambah pemilih gaya yang sepadan kepadanya dan keadaan ini berubah secara dinamik berdasarkan tingkah laku pengguna.

Contohnya: apabila pengguna menuding pada elemen tertentu, anda boleh menggunakan :hover untuk menerangkan keadaan elemen ini Walaupun ia serupa dengan CSS umum dan boleh menambah gaya pada elemen sedia ada, ia hanya boleh dalam pokok DOM. Gaya boleh ditambah kepada elemen hanya dalam keadaan yang diterangkan, jadi ia dipanggil kelas pseudo.

Apakah itu unsur pseudo?

Unsur pseudoPemahaman yang jelas ialah "unsur palsu" atau "unsur penyamaran ". Sebenarnya, ia boleh difahami dengan cara ini Elemen Pseudo sebenarnya adalah elemen maya yang tidak wujud (dalam bentuk kod), dan anda tidak dapat mencarinya dalam dokumen, jadi elemen pseudo adalah elemen maya.

Elemen pseudo ialah pemilih yang digunakan untuk mencipta beberapa elemen yang tiada dalam pepohon DOM dan menambah gaya padanya.

Elemen pseudo membolehkan anda menggayakan bahagian tertentu elemen yang dipilih tanpa menggunakan ID elemen atau atribut kelas. Sebagai contoh, melalui elemen pseudo anda boleh menetapkan gaya huruf pertama dalam perenggan, atau memasukkan beberapa kandungan sebelum atau selepas elemen, dsb.

Perbezaan antara kelas pseudo dan unsur pseudo:

Sila lihat contoh berikut:

Contoh 1:

<ul>
  <li>第一列</li>
  <li>第二列</li>
</ul>

Jika kita ingin menambah gaya pada lajur pertama, kita boleh melakukannya dalam dua cara berikut:

(1) Tambahkan kelas ke lajur pertama dan letakkannya dalam Tentukan gaya dalam kelas:

<ul>
  <li class="first-item">第一列</li> 
  <li>第二列</li></ul>
</ul>

.first-item{color:orange;}

(2) Jika tidak perlu menambah kaedah kelas, kita boleh menambah gaya pada

dengan menetapkan: kelas pseudo anak pertama , pada masa ini, li yang diubah suai masih wujud dalam pepohon DOM

<ul>
  <li>第一个</li>
  <li>第二个</li>
</ul>

li:first-child{color:orage;}

Contoh 2:

<p>Hello World, and wish you have a good day!</p>

Saya ingin memberikan perenggan no. Untuk menambah gaya pada huruf, anda boleh menggunakan kaedah berikut:

(1) Balut huruf pertama dengan elemen untuk span:

<p>
  <span class="first">H</span>ello World, and wish you have a good day!
</p>

.first{color:red;}

(2) Jika elemen tidak dibuat, kita boleh menambah gaya pada elemen

Pada masa ini, ia kelihatan seperti elemen span maya dicipta dan ditambahkan padanya, tetapi sebenarnya elemen span ini tidak wujud dalam nombor DOM

<p>Hello World, and wish you have a good day!</p>

p:first-letter{color:red;}

Daripada yang di atas. contoh kita boleh melihat bahawa objek operasi kelas pseudo ialah elemen sedia ada dalam pepohon dokumen. Oleh itu, perbezaan antara kelas pseudo dan unsur pseudo ialah sama ada elemen di luar pepohon dokumen dicipta atau tidak.

Gunakan kolon tunggal atau kolon berganda untuk unsur pseudo?

Spesifikasi css3 memerlukan penggunaan titik bertindih berganda (::) untuk mewakili unsur pseudo untuk membezakan kelas pseudo dan unsur pseudo, seperti penggunaan unsur pseudo seperti sebagai ::sebelum dan ::selepas kolon berganda (::), :hover dan :active kelas pseudo menggunakan kolon tunggal (:). Kecuali beberapa penyemak imbas yang lebih rendah daripada IE8, kebanyakan penyemak imbas menyokong kaedah perwakilan bertindih bertindih (::) bagi elemen pseudo.

Walau bagaimanapun, kecuali beberapa elemen pseudo seperti ::latar belakang yang mesti menggunakan titik dua bertindih (::), kebanyakan elemen pseudo menyokong tulisan bertindih tunggal dan bertindih dua, seperti: :after, ditulis sebagai :after Ia masih boleh berjalan seperti biasa.

Standard w3c menyatakan bahawa walaupun piawaian CSS3 memerlukan elemen pseudo untuk ditulis dengan dua titik bertindih, tulisan bertindih tunggal masih disokong. Untuk keserasian ke belakang, kami mengesyorkan agar anda masih menggunakan kaedah penulisan bertitik tunggal buat masa ini.

Kelas pseudo yang biasa digunakan ialah:

• :aktif memilih elemen yang sedang diaktifkan (berpadanan dengan keadaan yang ditentukan)

• :legar memilih elemen yang dilegar oleh tetikus (padanan dengan keadaan yang ditentukan)

• :pautan memilih elemen yang belum dilawati (padan dengan keadaan yang ditentukan )

• :dilawati Memilih elemen yang telah dilawati (padanan dengan status yang ditentukan)

• :anak pertama Memilih elemen yang merupakan elemen anak pertama bagi elemen induknya

• :lang(value) memilih elemen dengan atribut lang yang ditentukan

• :focus memilih elemen dengan input papan kekunci fokus

• :dayakan memilih setiap elemen yang didayakan

• :dayakan memilih setiap elemen yang dilumpuhkan

• : ditanda Pilih setiap elemen yang dipilih

• :sasaran Pilih elemen utama semasa

• :jenis pertama Pilih jika ia adalah induknya Elemen itu elemen anak pertama daripada jenis tertentu

• :last-of-type memilih elemen yang merupakan elemen anak terakhir bagi jenis tertentu elemen induknya

• :only-of-type memilih elemen yang memuaskan Merupakan satu-satunya elemen jenis elemen anak tertentu daripada elemen induknya

• :nth-of-type(n) Memilih elemen yang merupakan elemen anak ke- jenis tertentu unsur induknya

• :nth-last-of-type(n) Memilih unsur ke-n bagi jenis tertentu yang merupakan praakhir unsur induknya

• :anak tunggal memilih elemen yang merupakan satu-satunya elemen anak bagi elemen induknya

• :anak terakhir memilih elemen yang merupakan elemen terakhir unsurnya elemen induk

• :nth-child(n) memilih elemen yang merupakan elemen anak ke-n dari elemen induknya

• :nth-last -child(n) memilih elemen yang memenuhi Elemen yang merupakan elemen anak ke-n dari bahagian bawah elemen induknya

• :kosong memilih elemen yang tidak memenuhi unsur anak

• :pilihan dalam julat Memenuhi elemen yang nilainya berada dalam julat yang ditentukan

• : luar julat Memilih unsur yang nilainya bukan dalam julat yang ditentukan

• : tidak sah Memilih Elemen yang memuaskan dengan nilai tidak sah

• : sah Pilih elemen dengan nilai yang sah

• :bukan(pemilih) Pilih elemen yang tidak memuaskan Elemen pemilih

• :pilihan dipilih sebagai elemen bentuk pilihan, iaitu, terdapat tiada atribut "diperlukan"

• :baca sahaja dipilih dengan "baca sahaja" Elemen borang

• :baca-tulis memilih elemen borang tanpa "baca sahaja"

• :root memilih elemen akar

Unsur pseudo yang biasa digunakan

• ::huruf pertama memilih perkataan pertama elemen yang ditentukan

• ::baris pertama memilih baris pertama elemen yang ditentukan

• ::selepas memasukkan kandungan sebelum kandungan elemen yang ditentukan

• : :sebelum Sisipkan kandungan selepas kandungan elemen yang ditentukan

• ::selection Pilih kandungan yang dipilih oleh pengguna dalam elemen yang ditentukan

(Belajar perkongsian video :tutorial video css)

Atas ialah kandungan terperinci Apakah yang dimaksudkan dengan kelas pseudo css3 dan elemen pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!