Apakah pemilih baharu yang ditambahkan pada css3?

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

🎜> 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