Apakah pemilih baharu yang ditambahkan pada css3?-Soal Jawab bahagian hadapan-php.cn

Pemilih baharu dalam css3 ialah: ":first-of-type", ":last-of-type", ":last-child", ":root", ":empty", " : target", ":enabled", ":disabled", ":valid" dan sebagainya.

Apakah pemilih baharu yang ditambahkan pada css3?

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

🎜> 3[a[src^="https"]Pilih elemen yang nilai atribut srcnya bermula dengan "https"3[a[src$=".pdf"]Pilih setiap elemen yang nilai atribut srcnya berakhir dengan ".pdf"3[a[src*="44lan"] Pilih setiap elemen yang nilai atribut srcnya mengandungi subrentetan "44lan" 3:first-of-typep:first-of-type memilih elemen :jenis-terakhir

Elemen

:sahaja-dari-jenis

:anak tunggal< ;P> Elemen :anak-ke-nth(n

:nth-last-child(n

:nth-of-type(n< Elemen P>:nth- last-of-type(n

:anak terakhir< P>:root:kosong

:sasaran:enabled:dilumpuhkan:ditanda:bukan(pemilih

::selection:luar jarak<

Pemilih	Contoh	Contoh Penerangan	CSS
elemen1~elemen2	p~ul	Pilih setiap elemen ul
atribut^=nilai]
atribut$= nilai]
atribut*=nilai]
		pertama yang merupakan induknya 🎜>3
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	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	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	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

.kelas.introPilih semua elemen dengan class="intro"1#id #firstnamePilih semua elemen dengan id="firstname"1**Pilih semua elemen2elemen pPilih semua

elemen1elemen,elemen em>div,pPilih semua

elemen
elemen div pPilih semua
dalam elemen

>elemen>elemen div>p Pilih semua td class="notranslate">div pMemilih semua
serta-merta mengikuti elemen

2[ atribut] [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
elemen
1::first-line p::first -baris
Pilih baris pertama setiap
elemen
1 ::first- child p::first-child
Menentukan gaya hanya jika elemen
induknya.
2::sebelum p::sebelum
Sisipkan kandungan sebelum setiap elemen

2::selepas p::selepas
Sisipkan kandungan selepas setiap
elemen
2 ::lang(bahasa) p:lang(it)Pilih atribut lang Semua
dengan nilai permulaan="it"
2
(Belajar perkongsian video: tutorial video css, bahagian hadapan web)

Atas ialah kandungan terperinci Apakah pemilih baharu yang ditambahkan pada css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css3 选择符

sumber：php.cn

Artikel sebelumnya：Apakah kegunaan hsla() dalam css3 Artikel seterusnya：Apakah kaedah perwakilan warna yang disokong oleh css3?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang