CSS3選擇器有哪些及怎么使用

發(fā)布時(shí)間：2022-03-09 15:47:32 來(lái)源：億速云閱讀：150 作者：iii 欄目：web開(kāi)發(fā)

今天小編給大家分享一下CSS3選擇器有哪些及怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

在 CSS 中，抉擇器是一種內(nèi)容，用于決議需求添加名堂的元素。

"CSS" 列批示該屬性是在哪一個(gè) CSS 版本中定義的。（CSS1、CSS2 照常 CSS3。）

決議器	例子	例子刻劃	CSS
.class	.intro	抉擇 class="intro" 的全數(shù)元素。	1
#id	#firstname	決定 id="firstname" 的所有元素。	1
*	*	選擇一切元素。	2
element	p	決議全部 <p> 元素。	1
element,element	div,p	選擇一切 <div> 元素和全部 <p> 元素。	1
element element	div p	抉擇 <div> 元素外部的全部 <p> 元素。	1
element 選擇器" href="http://www.w3school.com.cn/cssref/sele首席技術(shù)官r_element_gt.asp">element>element	div>p	選擇父元素為 <div> 元素的全部 <p> 元素。	2
element+element	div+p	決意緊接在 <div> 元素以后的一切 <p> 元素。	2
[attribute]	[target]	決定帶有 target 屬性一切元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的全體元素。	2
[attribute~=value]	[title~=flower]	決定 title 屬性包含單詞 "flower" 的所有元素。	2
[attribute\|=value]	[lang\|=en]	決議 lang 屬性值以 "en" 最初的全體元素。	2
:link	a:link	決議全部未被走訪的鏈接。	1
:visited	a:visited	決定悉數(shù)已被訪問(wèn)的鏈接。	1
:active	a:active	決議勾當(dāng)鏈接。	1
:hover	a:hover	決議鼠標(biāo)指針位于其上的鏈接。	1
:focus	input:focus	決意獲得核心的 input 元素。	2
:first-letter	p:first-letter	決議每個(gè) <p> 元素的首字母。	1
:first-line	p:first-line	決定每個(gè) <p> 元素的首行。	1
:first-child	p:first-child	抉擇屬于父元素的第一個(gè)子元素的每個(gè) <p> 元素。	2
:before	p:before	在每一個(gè) <p> 元素的內(nèi)容夙昔插入內(nèi)容。	2
:after	p:after	在每一個(gè) <p> 元素的內(nèi)容之后插入內(nèi)容。	2
:lang(language)	p:lang(it)	決意帶有以 "it" 開(kāi)頭的 lang 屬性值的每個(gè) <p> 元素。	2
element1~element2	p~ul	選擇背面有 <p> 元素的每個(gè) <ul> 元素。	3
[attribute^=value]	a[src^="https"]	決定其 src 屬性值以 "https" 一開(kāi)始的每個(gè) <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 末端的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	決意其 src 屬性中征求 "abc" 子串的每個(gè) <a> 元素。	3
:first-of-type	p:first-of-type	決意屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。	3
:last-of-type	p:last-of-type	決議屬于其父元素的最后 <p> 元素的每一個(gè) <p> 元素。	3
:only-of-type	p:only-of-type	決意屬于其父元素獨(dú)一的 <p> 元素的每個(gè) <p> 元素。	3
:only-child	p:only-child	決議屬于其父元素的唯一子元素的每個(gè) <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬于其父元素的第二個(gè)子元素的每一個(gè) <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最后一個(gè)子元素起頭計(jì)數(shù)。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬于其父元素第二個(gè) <p> 元素的每個(gè) <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，可是從最后一個(gè)子元素入手下手計(jì)數(shù)。	3
:last-child	p:last-child	決定屬于其父元素最后一個(gè)子元素每個(gè) <p> 元素。	3
:root	:root	抉擇文檔的根元素。	3
:empty	p:empty	決意沒(méi)有子元素的每個(gè) <p> 元素（包括文本節(jié)點(diǎn)）。	3
:target	#news:target	選擇當(dāng)前勾當(dāng)?shù)?#news 元素。	3
:enabled	input:enabled	決定每一個(gè)啟用的 <input> 元素。	3
:disabled	input:disabled	抉擇每個(gè)禁用的 <input> 元素	3
:checked	input:checked	選擇每個(gè)當(dāng)選中的 <input> 元素。	3
:not(selector)	:not(p)	決定非 <p> 元素的每個(gè)元素。	3
::selection	::selection	決意被用戶(hù)選取的元素部門(mén)。	3

以上就是“CSS3選擇器有哪些及怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

CSS3選擇器有哪些及怎么使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽