Kelas pseudo struktur

Dikenakan dari buku "HTML5 & CSS3 untuk dunia nyata, edisi ke-2" yang dikarang oleh Alexis Goldstein, Louis Lazaris dan Estelle Weyl. Buku ini boleh didapati di kedai-kedai di seluruh dunia, dan anda juga boleh membeli versi e-book di sini.

Setakat ini, kami telah belajar bagaimana mencari unsur -unsur berdasarkan atribut dan negara mereka. CSS3 juga membolehkan kita meletakkan unsur -unsur berdasarkan semata -mata di mana mereka berada dalam tag. Pemilih ini diklasifikasikan sebagai kelas pseudo struktur.

Sekarang pemilih ini mungkin kelihatan rumit, tetapi mereka lebih masuk akal apabila kita melihat cara menerapkannya kemudian. Kecuali untuk IE8 dan ke bawah, versi IE9 dan yang lebih baru dan semua pelayar lain menyokong pemilih ini:

elemen akar, dalam fail HTML kami, adalah elemen :root. html

sub-elemen nth E. Parameter n dijelaskan dalam keterangan di bawah. E:nth-child(n)

elemen kanak -kanak f (Countdown dari yang terakhir). E:nth-last-child(n) akan memadankan item terakhir dalam mana -mana senarai, yang sama dengan li:nth-last-child(1) (lihat arahan di bawah). li:last-child

Dalam elemen induk yang diberikan, elemen n jenis E adalah. Perbezaan antara E:nth-of-type(n) dan nth-child dijelaskan dalam keterangan di bawah. nth-of-type

adalah sama seperti E:nth-last-of-type(n), tetapi bermula dari elemen terakhir dalam elemen induk. nth-of-type(n)

Penerangan: Parameter pemilih struktur

Terdapat empat kelas pseudo yang menggunakan persamaan

sebagai parameter dalam kurungan, atau gunakan kata kunci an b dan odd. Kategori pseudo struktur termasuk even, :nth-child(an b), :nth-last-child(an b) dan :nth-of-type(an b). Dalam persamaan :nth-last-of-type(an b), A adalah pengganda sebagai integer, B adalah offset sebagai integer, dan n sentiasa pembolehubah n. an b

Dalam kes yang paling mudah, anda boleh lulus integer. Sebagai contoh,

akan mencari elemen elemen ketiga dari satu elemen induk tunggal. Anda boleh lulus salah satu daripada dua kata kunci E:nth-of-type(3) atau odd untuk mencari elemen masing -masing. Anda juga boleh lulus ungkapan angka dengan lebih cekap, seperti even. 3N mewakili setiap tiga elemen, menentukan kekerapan, dan 1 adalah offset. Offset lalai adalah sifar, jadi E:nth-of-type(3n 1) akan sepadan dengan elemen ke -3, ke -6, dan ke -9 dalam siri ini, manakala nth-of-type(3n) akan sepadan dengan 1, 4, 7, dan sebagainya. nth-of-type(3n 1)

offset negatif juga dibenarkan. CSS adalah bahasa berasaskan bahasa, bukan bahasa pengaturcaraan, jadi tuduhan bermula pada 1, bukan 0. Tidak ada ruang di antara pengganda A dan pembolehubah N, dan offset mesti diletakkan pada akhir.

Dengan kelas pseudo angka ini, anda boleh menentukan unsur-unsur yang anda ingin cari tanpa menambah kelas ke tag. Contoh yang paling biasa adalah jadual, di mana setiap baris lain sedikit lebih gelap dalam warna untuk membaca lebih mudah. Kami terpaksa menambah kelas ganjil atau bahkan kepada setiap tr untuk mencapai matlamat ini. Sekarang kita hanya boleh mengisytiharkan untuk mencari setiap baris ganjil tanpa menyentuh tanda. Anda juga boleh pergi lebih jauh dengan jadual jalur tiga warna: kedudukan tr:nth-of-type(odd), tr:nth-of-type(3n) dan tr:nth-of-type(3n 1) dan memohon warna yang berbeza untuk setiap. tr:nth-of-type(3n 2)

Jika E adalah anak pertama elemen induknya, ia adalah elemen E. Ini sama dengan E:first-child. E:nth-child(1)

Jika E adalah anak terakhir elemen induknya, ia adalah elemen E, sama seperti E:last-child. E:nth-last-child(1)

adalah sama seperti :first-of-type. :nth-of-type(1)

adalah sama seperti E:last-of-type. :nth-last-of-type(1)

Jika E adalah satu -satunya anak dari elemen induknya, ia adalah elemen E. E:only-child

Jika e adalah satu -satunya elemen jenis E dalam anak langsung elemen induknya, maka itu adalah elemen E. E:only-of-type

Penerangan: Sub-elemen dan jenis

Apabila menggunakan pemilih struktur

dan nth-of-type, adalah penting untuk memahami maksud "sub-elemen" dan "jenis" dalam kes ini. "Sube Elements" Lihat semua elemen kanak -kanak yang sepadan dengan tuduhan dan periksa sama ada perlawanan pendahulu. Taipkan pertama melihat semua elemen yang sepadan dengan pendahulu dan kemudian sepadan mengikut kiraan. nth-child

Untuk

, penyemak imbas melihat setiap elemen kanak -kanak ketiga elemen induk. Jika elemen kanak -kanak adalah p, ia sepadan; Untuk p:nth-child(3n), penyemak imbas melihat semua kanak -kanak elemen induk dan sepadan dengan setiap tiga ps. p:nth-of-type(3n)

Kelas pseudo struktur adalah berdasarkan unsur-unsur induk dan mula mengira lagi untuk setiap elemen induk baru. Mereka hanya melihat elemen yang merupakan elemen kanak -kanak langsung elemen induk. Nod teks bukan sebahagian daripada persamaan.

unsur -unsur tanpa elemen kanak -kanak; E:empty

dan hello

tidak akan sepadan

, tetapi

dan p:empty

akan sepadan. Pemilih ini juga sepadan dengan elemen kosong atau tidak sah, seperti

dan.

unsur -unsur dalam bahasa yang menggunakan singkatan dua huruf (mis. En). Tidak seperti

(di mana atribut

mesti wujud sebagai atribut elemen e), jika bahasa itu diisytiharkan pada elemen itu sendiri atau pada mana -mana nenek moyang, E:lang(en) akan sepadan dengan E. E:[lang|=en] lang E:lang(en) Ini amat berguna: ia akan memilih elemen yang sepadan dengan pemilih dalam kurungan.

pemilih dengan kelas pseudo yang sepadan dengan segala-galanya di sebelah kiri kolon dan kemudian tidak termasuk unsur-unsur dari kumpulan perlawanan yang juga sepadan dengan kandungan di sebelah kanan kolon. Perlawanan kiri lebih disukai. Sebagai contoh, :not akan sepadan dengan semua perenggan dalam dokumen dan kemudian mengecualikan semua perenggan yang juga mempunyai kelas hak cipta dari koleksi itu. Anda boleh menyertai kelas pseudo berganda bersama-sama. p:not(.copyright) akan memadankan semua elemen input pada halaman, kecuali unsur kotak semak jenis atau butang radio. :not input:not([type=checkbox]):not([type=radio]) Soalan Lazim pada Pseudoclasses Struktur

Apakah pelbagai jenis kelas pseudo struktur?

Kelas pseudo struktur adalah subset kelas pseudo CSS yang membolehkan anda memilih dan elemen gaya berdasarkan kedudukan mereka dalam pokok dokumen. Mereka termasuk

,

, :root, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, , :empty,

, dan

. Setiap kelas pseudo ini mempunyai ciri unik yang membolehkan gaya HTML yang lebih tepat. :nth-child()

Bagaimana kelas pseudo berfungsi? :nth-child() :nth-child(2) :nth-child(odd) Pseudo-Class sepadan dengan elemen berdasarkan kedudukan mereka dalam sekumpulan elemen tahap yang sama. Ia menerima parameter yang boleh menjadi nombor, kata kunci, atau formula. Sebagai contoh, :nth-child(2n 1) akan memilih elemen kanak-kanak kedua elemen induknya, manakala

atau

akan memilih semua elemen kanak-kanak yang ganjil. :nth-of-type() Apakah perbezaan antara :nth-child()

dan

? :nth-of-type() :nth-child() Walaupun :nth-child() dan :nth-of-type() kedua -dua elemen pilih berdasarkan kedudukan mereka, mereka berbeza -beza dalam cara mereka mengira kedudukan ini. li Rawat semua elemen sebagai adik beradik tanpa mengira jenis mereka, sementara p hanya mengira unsur -unsur jenis yang sama. Sebagai contoh, jika anda mempunyai senarai unsur -unsur :nth-child() dan :nth-of-type(), li akan mengira kedua -dua jenis elemen, manakala p hanya akan mengira unsur -unsur

atau

, bergantung kepada elemen yang ditentukan.

Bagaimana untuk memilih dan menetapkan gaya elemen anak pertama elemen induk? :first-child ul Untuk memilih dan menetapkan gaya elemen kanak-kanak pertama elemen induk, anda boleh menggunakan kelas pseudo li. Sebagai contoh, jika anda ingin menukar warna elemen ul li:first-child { color: red; } pertama dalam

, anda boleh menggunakan CSS berikut: .

:only-child Apakah fungsi kelas pseudo?

:only-child Pseudo-Class sepadan dengan unsur-unsur yang merupakan satu-satunya elemen kanak-kanak elemen induknya. Ini berguna apabila anda hanya mahu menggunakan gaya ke elemen apabila ia tidak mempunyai elemen saudara. Sebagai contoh, anda mungkin mahu menambah gaya khas untuk p unsur hanya apabila mereka adalah satu -satunya elemen kanak -kanak div.

Bagaimana menggunakan :empty kelas pseudo?

:empty kelas pseudo sepadan dengan unsur-unsur tanpa elemen kanak-kanak. Ini termasuk nod teks, komen, atau elemen lain. Sebagai contoh, anda boleh menggunakannya untuk menyembunyikan kosong div, jika tidak div akan mengambil ruang pada halaman: div:empty { display: none; }.

Bolehkah kelas pseudo struktur digabungkan?

Ya, anda boleh menggabungkan kelas pseudo struktur untuk membuat pemilih yang lebih spesifik. Sebagai contoh, anda boleh menggabungkan :nth-of-type() dan :last-child untuk memilih jenis terakhir li elemen dalam elemen induknya, dengan syarat ia juga merupakan anak terakhir elemen induknya.

Adakah semua pelayar menyokong kelas pseudo struktur?

Pelayar yang paling moden menyokong kelas pseudo struktur, tetapi mungkin terdapat beberapa ketidakkonsistenan atau kekurangan sokongan dalam pelayar yang lebih tua. Sebelum menggunakan kelas pseudo khusus di CSS, lebih baik untuk sentiasa memeriksa tahap sokongan semasa di laman web seperti yang saya boleh gunakan.

Bolehkah kelas pseudo struktur digunakan dengan unsur-unsur pseudo?

Ya, kelas pseudo struktur boleh digunakan bersempena dengan elemen pseudo. Sebagai contoh, anda boleh menggunakan pseudo-elemen ::before dengan kelas pseudo :first-child untuk menambah kandungan sebelum anak pertama elemen induk.

Bagaimana untuk membuat gaya dinamik menggunakan kelas pseudo struktur?

Kelas pseudo struktur boleh digunakan untuk mewujudkan gaya dinamik yang bertindak balas terhadap struktur HTML. Sebagai contoh, anda boleh menggunakan kelas pseudo :nth-child() dengan formula untuk membuat jadual cetak zebra, atau menggunakan kelas pseudo :hover untuk menukar warna pautan apabila anda melayang. Kemungkinan tidak terhingga dan terhad hanya oleh kreativiti anda.

Atas ialah kandungan terperinci Kelas pseudo struktur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!