Rumah > Artikel > hujung hadapan web > Apakah pemilih baharu yang ditambahkan pada css3?
Apakah pemilih baharu yang ditambahkan pada css3?
- 青灯夜游asal
- 2022-03-17 18:48:462242semak imbas
Pemilih baharu dalam css3 ialah: ":first-of-type", ":last-of-type", ":last-child", ":root", ":empty", " : target", ":enabled", ":disabled", ":valid" dan sebagainya.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Untuk menggunakan CSS untuk mencapai kawalan satu-sama-satu, satu-ke-banyak atau banyak-ke-satu elemen dalam halaman HTML, anda perlu menggunakan pemilih CSS.
Elemen dalam halaman HTML dikawal melalui pemilih CSS.
Pemilih CSS digunakan untuk memilih corak elemen yang anda ingin gayakan.
Pemilih baharu dalam css3
Pemilih baharu dalam CSS3 terutamanya dibahagikan kepada pemilih atribut, pemilih perhubungan, pseudo berstruktur- Terdapat 4 kategori pemilih kelas dan pemilih elemen pseudo Pengenalan khusus adalah seperti berikut:
1 Pemilih atribut
Pemilih atribut boleh berdasarkan pada atribut dan nilai atribut. daripada teg halaman web untuk memilih penanda.
pemilih atribut terutamanya termasuk tiga pemilih jantina: E[att^=value], E[att$=value] dan E[att*=value].
2. Pemilih perhubungan
Pemilih perhubungan dalam CSS3 terutamanya termasuk pemilih keturunan dan pemilih adik-beradik.
(1) Pemilih perhubungan
(2) Pemilih adik beradik bersebelahan
(3) Pemilih adik beradik biasa
3. pemilih kelas
Pemilih kelas pseudo berstruktur boleh mengurangkan takrifan atribut kelas dan atribut id dalam dokumen, menjadikan dokumen lebih ringkas.
4. Pemilih unsur Pseudo
Pemilih unsur pseudo biasanya tanda diikuti dengan titik bertindih Inggeris ":", dan titik bertindih Inggeris diikuti dengan nama unsur pseudo .
Senarai pemilih baharu dalam css3
| Pemilih | Contoh | Contoh Penerangan | CSS |
|---|---|---|---|
| elemen1~elemen2 | p~ul | Pilih setiap elemen ul | 🎜> 3|
| atribut^=nilai] | a[src^="https"]Pilih elemen yang nilai atribut srcnya bermula dengan "https" | 3 | |
| atribut$= nilai] | a[src$=".pdf"]Pilih setiap elemen yang nilai atribut srcnya berakhir dengan ".pdf" | 3 | |
| atribut*=nilai] | a[src*="44lan"]Pilih setiap elemen yang nilai atribut srcnya mengandungi subrentetan "44lan" | 3 | |
| p:first-of-type | memilih elemen | pertama |
|
| p:jenis-terakhir | Pilih setiap | ialah < P> elemen induknya 3 |
|
| p:sahaja-dari-jenis | Memilih satu-satunya elemen | yang mana setiap elemen ialah induknya 3 | |
| p:anak tunggal | Pilih setiap | < ;P> Elemen ialah satu-satunya elemen anak bagi ibu bapanya 3 |
|
| ) p:anak-ke-2(2 ) | Memilih setiap elemen | yang merupakan anak kedua daripada induknya 3 |
|
| )p:nth-last-child(2) | Memilih setiap elemen | itu adalah anak kedua ibu bapanya, mengira 3 |
|
| ) p:nth-of-type(2) | Pilih setiap | < Elemen P> ialah elemen kedua daripada induknya 3 |
|
| )p:nth-last -of-type(2) | Pilih setiap | Elemen ialah elemen kedua bagi induknya, mengira daripada anak terakhir 3 |
|
| p:anak terakhir | Pilih setiap | < P> elemen yang merupakan anak terakhir ibu bapanya. 3 |
|
| :root | Pilih elemen akar dokumen | 3 | |
| p:kosong | Memilih setiap elemen | yang tidak mempunyai anak (termasuk nod Teks) 3 |
|
| #berita:sasaran | Pilih # yang sedang aktif elemen berita (URL yang diklik yang mengandungi nama sauh ini) | 3 | |
| input:enabled | Pilih setiap Elemen input yang didayakan | 3 | |
| input:dilumpuhkan | Pilih setiap elemen input yang dilumpuhkan | 3 | |
| input:ditanda | Pilih setiap elemen input yang dipilih | 3 | |
| ):not(p) | Pilih semua orang yang bukan | Unsur elemen 3 |
|
| ::selection | elemen sepadan yang dipilih oleh pengguna Atau bahagian yang diserlahkan | 3 | |
| :luar julat | Padanan | <input> elemen yang nilainya berada di luar julat yang ditentukan | 3 |
| :dalam julat | :dalam julat | padanan dengan yang nilainya berada dalam julat yang ditentukan <input>elemen | 3 |
| :baca-tulis | :baca-tulis | digunakan untuk memadankan elemen boleh dibaca dan boleh ditulis | 3 |
| :baca sahaja | : baca- hanya | digunakan untuk memadankan elemen dengan set atribut "baca sahaja" | 3 |
| :pilihan | :pilihan | digunakan untuk memadankan elemen input pilihan | 3 |
| :diperlukan | :diperlukan | Digunakan untuk memadankan elemen dengan set atribut "diperlukan" | 3 |
| :valid | :valid | digunakan untuk memadankan Elemen dengan nilai input undang-undang | 3 |
| :tidak sah | :tidak sah | digunakan untuk memadankan elemen dengan nilai input yang tidak sah | 3 |
Pengetahuan lanjutan: css1, senarai pemilih css2
| Pemilih | Contoh | Contoh penerangan | CSS |
|---|
| 选择器 | 示例 | 示例说明 | CSS |
|---|---|---|---|
| .class | .intro | 选择所有class="intro"的元素 | 1 |
| #id | #firstname | 选择所有id="firstname"的元素 | 1 |
| * | * | 选择所有元素 | 2 |
| element | p | 选择所有 元素 |
1 |
| element,element | div,p | 选择所有 元素和 元素 |
1 |
| element element | div p | 选择 元素内的所有 元素 |
1 |
| element>element | div>p | 选择所有父级是 元素的 元素 |
2 |
| element element | div p | 选择所有紧接着 元素之后的 元素 |
2 |
| [attribute] | [target] | 选择所有带有target属性元素 | 2 |
| [attribute=value] | [target=_blank] | 选择所有使用target="_blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 选择一个lang属性的起始值="EN"的所有元素 | 2 |
| :link | a:link | 选择所有未访问链接 | 1 |
| :visited | a:visited | 选择所有访问过的链接 | 1 |
| :active | a:active | 选择活动链接 | 1 |
| :hover | a:hover | 选择鼠标在链接上面时 | 1 |
| :focus | input:focus | 选择具有焦点的输入元素 | 2 |
| ::first-letter | p::first-letter |
选择每一个 元素的第一个字母 |
1 |
| ::first-line | p::first-line |
选择每一个 元素的第一行 |
1 |
| ::first-child | p::first-child |
指定只有当 元素是其父级的第一个子级的样式。 |
2 |
| ::before | p::before |
在每个 元素之前插入内容 |
2 |
| ::after | p::after |
在每个 元素之后插入内容 |
2 |
| ::lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有 元素 |
2 |
elemen1elemen,elemen em> elemen dalam elemen serta-merta mengikuti elemen elemen elemen induknya. elemen dengan nilai permulaan="it" (Belajar perkongsian video: tutorial video css, bahagian hadapan web)div,pPilih semua
div pPilih semua
div>p Pilih semua
[target]Pilih semua elemen dengan atribut sasaran2[atribut=nilai]
[target=_blank]Pilih semua elemen dengan sasaran ="_blank"2[atribut~=nilai]
[title~=flower]Pilih semua elemen yang atribut tajuknya mengandungi perkataan "flower"2[atribut|=bahasa]
[lang|=ms] Memilih semua elemen dengan nilai permulaan atribut lang ="EN"2:pautan
a:pautan Pilih semua pautan yang belum dilawati1:dilawati
a:dilawatiPilih semua pautan yang dilawati 1:aktif
a:aktifPilih pautan Aktif1:hover
a:hoverApabila tetikus berada di atas pautan1:fokus
input:focusPilih elemen input dengan fokus2::huruf pertama
p::huruf pertama
Pilih huruf pertama setiap
1::first-linep::first -baris
Pilih baris pertama setiap
1 ::first- childp::first-child
Menentukan gaya hanya jika elemen
2::sebelump::sebelum
Sisipkan kandungan sebelum setiap elemen
2::selepasp::selepas
Sisipkan kandungan selepas setiap
2 ::lang(bahasa)p:lang(it)Pilih atribut lang Semua
2
Atas ialah kandungan terperinci Apakah pemilih baharu yang ditambahkan pada css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!