Apakah perbezaan antara kelas pseudo dan unsur pseudo dalam css3

Perbezaan: 1. Kelas pseudo digunakan untuk menambah gaya yang sepadan dengan elemen sedia ada apabila ia berada dalam keadaan tertentu, manakala elemen pseudo digunakan untuk mencipta beberapa elemen yang tiada dalam pepohon DOM dan menambah gaya kepada mereka; 2. Elemen pseudo akan mencipta elemen di luar pepohon dokumen, tetapi kelas pseudo tidak akan;

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

Apakah kelas pseudo dan unsur pseudo

Apakah yang anda fikirkan apabila perkataan "pseudo" disebut? "Palsu", "Kerajaan pseudo Wang Jingwei", "tidak wujud"...

Kelas Pseudo: digunakan apabila elemen sedia ada berada dalam keadaan tertentu (gelongsor, Klik, dsb. .) untuk menambah gaya yang sepadan dengannya. Keadaan ini berubah secara dinamik berdasarkan tingkah laku pengguna. Pemahaman saya ialah ia adalah keadaan yang tidak wujud dengan sendirinya dan hanya akan dicetuskan dalam keadaan tertentu (meluncur, mengklik Anda boleh menggunakan CSS untuk mengubah suai objek dalam keadaan ini). Sebagai contoh: apabila pengguna menuding pada elemen tertentu, anda boleh menggunakan :hover untuk menerangkan keadaan elemen Walaupun ia serupa dengan CSS umum dan boleh menambah gaya pada elemen sedia ada, ia hanya boleh digunakan dalam keadaan yang tidak boleh diterangkan oleh pokok DOM Elements menambah gaya, jadi ia dipanggil pseudo-class.

Unsur Pseudo : digunakan untuk mencipta beberapa elemen yang tiada dalam pepohon DOM dan menambah gaya padanya. Sebagai contoh, kita boleh menggunakan :before untuk menambah beberapa teks sebelum elemen dan menambah gaya pada teks Walaupun pengguna boleh melihat teks, ia sebenarnya bukan dalam dokumen DOM.

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 pada lajur pertama dan 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

pertama dengan menetapkan: kelas pseudo anak pertama kali 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>

Jika anda ingin menambah gaya pada huruf pertama perenggan, anda boleh menggunakan kaedah berikut:

( 1) Balut elemen ; elemen tidak dicipta, kita boleh menghantarnya kepada elemen

sebenarnya elemen span ini tidak wujud dalam nombor DOM

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


.first{color:red;}

Kita boleh lihat daripada contoh di atas: pseudo-class beroperasi pada elemen sedia ada dalam pepohon dokumen, manakala pseudo-element mencipta elemen di luar pokok dokumen. Oleh itu, perbezaan antara

pseudo-class dan pseudo-elements ialah sama ada elemen di luar pepohon dokumen dicipta atau tidak.

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

p:first-letter{color:red;}

Gunakan kolon tunggal atau kolon berganda untuk unsur pseudo?

Spesifikasi css3 memerlukan penggunaan titik dua bertindih (::) untuk mewakili unsur pseudo untuk membezakan kelas pseudo dan unsur pseudo Contohnya, unsur pseudo seperti :: sebelum dan ::selepas menggunakan titik dua bertindih (::), :hover dan :kelas pseudo aktif menggunakan satu titik bertindih (:). Kecuali beberapa penyemak imbas yang lebih rendah daripada IE8, kebanyakan penyemak imbas menyokong kaedah perwakilan bertindih bertindih (::) bagi unsur pseudo.

Walau bagaimanapun, kecuali beberapa unsur pseudo seperti ::latar belakang yang mesti menggunakan titik dua bertindih (::), kebanyakan unsur-unsur pseudo menyokong tulisan bertindih tunggal dan bertindih dua, seperti ::selepas, yang boleh ditulis sebagai :selepas.

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 termasuk:

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

:tuding pilih elemen yang sedang dilegar oleh tetikus Elemen (padan dengan status yang ditentukan)

:pautan Memilih elemen yang belum dilawati (berpadanan dengan status 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

:fokus memilih fokus input papan kekunci

:dayakan memilih setiap elemen yang didayakan

:lumpuhkan memilih setiap elemen yang dilumpuhkan

:ditanda memilih setiap elemen yang dipilih

:sasaran memilih elemen utama semasa

:jenis pertama memilih elemen yang merupakan elemen anak pertama bagi jenis tertentu elemen induknya

:terakhir- jenis memilih elemen yang merupakan elemen anak terakhir bagi jenis tertentu unsur induknya

: jenis sahaja memilih unsur yang merupakan satu-satunya elemen anak jenis tertentu unsur induknya

: nth-of-type(n) memilih elemen

jenis tertentu iaitu elemen anak ke-n bagi elemen induknya: nth-last-of-type(n) memilih elemen yang memenuhi unsur kedua terakhir unsur induknya n unsur jenis tertentu

:anak tunggal memilih unsur

iaitu satu-satunya unsur anak unsur induknya

:last-child memilih elemen yang merupakan elemen terakhir bagi elemen induknya

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

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

:empty memilih elemen yang tidak mempunyai elemen anak

:in -pemilihan julat Pilih elemen yang nilainya berada dalam julat yang ditentukan

:luar julat Pilih elemen yang nilainya tidak berada dalam julat yang ditentukan

:tidak sah Pilih elemen yang nilainya tidak sah

:valid memilih elemen yang memenuhi nilai yang sah

:not(selector) memilih elemen yang tidak memuaskan pemilih

:optional memilih elemen borang yang bersifat pilihan, iaitu, tiada atribut "diperlukan"

:baca-sahaja memilih elemen bentuk dengan "baca sahaja"

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

: akar memilih unsur akar

Unsur pseudo yang biasa digunakan

::huruf pertama memilih perkataan pertama unsur yang ditentukan

::first -line memilih baris pertama elemen yang ditentukan

::selepas Sisipkan kandungan sebelum kandungan unsur yang ditentukan

::sebelum Sisipkan kandungan selepas kandungan unsur yang ditentukan

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

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah perbezaan antara kelas pseudo dan unsur pseudo dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!