CSS選擇器寫(xiě)法案例教程

CSS選擇器寫(xiě)法案例教程

CSS列表頁(yè)填寫(xiě)

CSS標(biāo)題寫(xiě)法

CSS內(nèi)容寫(xiě)法

CSS刪除其它信息寫(xiě)法

CSS選擇器教程

一、CSS列表頁(yè)寫(xiě)法（找到HTML里列表標(biāo)題共同且唯一的元素）

例：h2就是列表標(biāo)題唯一的標(biāo)簽，h2的下級(jí)a就是列表標(biāo)題，CSS寫(xiě)法=h2>a

二、CSS標(biāo)題寫(xiě)法（找到HTML里列表標(biāo)題共同且唯一的元素）

例：entry-title就是內(nèi)容標(biāo)題的唯一的元素， CSS寫(xiě)法=.entry-title

三、CSS內(nèi)容寫(xiě)法（找到HTML里列表標(biāo)題共同且唯一的元素）

例：entry-content就是內(nèi)容的唯一的元素， CSS寫(xiě)法=.entry-content

四、CSS刪除其它信息行為寫(xiě)法（找到HTML里我們需要?jiǎng)h除這段話(huà)的元素）

例：entry-copyright就是內(nèi)容需要?jiǎng)h除段落的唯一元素， CSS寫(xiě)法=.entry-copyright

注：忘記選擇刪除行為，保存后在字段篩選點(diǎn)擊刪除行為

五、CSS選擇器教程

選擇器	示例	示例說(shuō)明	CSS
.class	.intro	選擇所有class="intro"的元素	1
#id	#firstname	選擇所有id="firstname"的元素	1
*	*	選擇所有元素	2
element	p	選擇所有<p>元素	1
element,element	div,p	選擇所有<div>元素和<p>元素	1
element element	div p	選擇<div>元素內(nèi)的所有<p>元素	1
element>element	div>p	選擇所有父級(jí)是 <div> 元素的 <p> 元素	2
element+element	div+p	選擇所有緊跟在 <div> 元素之后的第一個(gè) <p> 元素	2
[attribute]	[target]	選擇所有帶有target屬性元素	2
[attribute=value]	[target=-blank]	選擇所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	選擇標(biāo)題屬性包含單詞"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	選擇 lang 屬性等于 en，或者以 en- 為開(kāi)頭的所有元素	2
:link	a:link	選擇所有未訪(fǎng)問(wèn)鏈接	1
:visited	a:visited	選擇所有訪(fǎng)問(wèn)過(guò)的鏈接	1
:active	a:active	選擇活動(dòng)鏈接	1
:hover	a:hover	選擇鼠標(biāo)在鏈接上面時(shí)	1
:focus	input:focus	選擇具有焦點(diǎn)的輸入元素	2
:first-letter	p:first-letter	選擇每一個(gè)<p>元素的第一個(gè)字母	1
:first-line	p:first-line	選擇每一個(gè)<p>元素的第一行	1
:first-child	p:first-child	指定只有當(dāng)<p>元素是其父級(jí)的第一個(gè)子級(jí)的樣式。	2
:before	p:before	在每個(gè)<p>元素之前插入內(nèi)容	2
:after	p:after	在每個(gè)<p>元素之后插入內(nèi)容	2
:lang(language)	p:lang(it)	選擇一個(gè)lang屬性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	選擇p元素之后的每一個(gè)ul元素	3
[attribute^=value]	a[src^="https"]	選擇每一個(gè)src屬性的值以"https"開(kāi)頭的元素	3
[attribute$=value]	a[src$=".pdf"]	選擇每一個(gè)src屬性的值以".pdf"結(jié)尾的元素	3
[attribute=value*]	a[src*="runoob"]	選擇每一個(gè)src屬性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	選擇每個(gè)p元素是其父級(jí)的第一個(gè)p元素	3
:last-of-type	p:last-of-type	選擇每個(gè)p元素是其父級(jí)的最后一個(gè)p元素	3
:only-of-type	p:only-of-type	選擇每個(gè)p元素是其父級(jí)的唯一p元素	3
:only-child	p:only-child	選擇每個(gè)p元素是其父級(jí)的唯一子元素	3
:nth-child(n)	p:nth-child(2)	選擇每個(gè)p元素是其父級(jí)的第二個(gè)子元素	3
:nth-last-child(n)	p:nth-last-child(2)	選擇每個(gè)p元素的是其父級(jí)的第二個(gè)子元素，從最后一個(gè)子項(xiàng)計(jì)數(shù)	3
:nth-of-type(n)	p:nth-of-type(2)	選擇每個(gè)p元素是其父級(jí)的第二個(gè)p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇每個(gè)p元素的是其父級(jí)的第二個(gè)p元素，從最后一個(gè)子項(xiàng)計(jì)數(shù)	3
:last-child	p:last-child	選擇每個(gè)p元素是其父級(jí)的最后一個(gè)子級(jí)。	3
:root	:root	選擇文檔的根元素	3
:empty	p:empty	選擇每個(gè)沒(méi)有任何子級(jí)的p元素（包括文本節(jié)點(diǎn)）	3
:target	#news:target	選擇當(dāng)前活動(dòng)的#news元素（包含該錨名稱(chēng)的點(diǎn)擊的URL）	3
:enabled	input:enabled	選擇每一個(gè)已啟用的輸入元素	3
:disabled	input:disabled	選擇每一個(gè)禁用的輸入元素	3
:checked	input:checked	選擇每個(gè)選中的輸入元素	3
:not(selector)	:not(p)	選擇每個(gè)并非p元素的元素	3
::selection	::selection	匹配元素中被用戶(hù)選中或處于高亮狀態(tài)的部分	3
:out-of-range	:out-of-range	匹配值在指定區(qū)間之外的input元素	3
:in-range	:in-range	匹配值在指定區(qū)間之內(nèi)的input元素	3
:read-write	:read-write	用于匹配可讀及可寫(xiě)的元素	3
:read-only	:read-only	用于匹配設(shè)置 "readonly"（只讀）屬性的元素	3
:optional	:optional	用于匹配可選的輸入元素	3
:required	:required	用于匹配設(shè)置了 "required" 屬性的元素	3
:valid	:valid	用于匹配輸入值為合法的元素	3
:invalid	:invalid	用于匹配輸入值為非法的元素	3