本文轉(zhuǎn)自慕課網(wǎng)公眾號，原文鏈接

css選擇器非常之多，常見的如class選擇器，id選擇器，標(biāo)簽選擇器等等。每個(gè)的用法都有所區(qū)別，雖然很多都能到達(dá)同樣的效果，但還是有一些更優(yōu)的選擇。

class、id、標(biāo)簽選擇器

這個(gè)幾個(gè)就不細(xì)說了，class和標(biāo)簽選擇器主要用來設(shè)置樣式上面，id選擇器推薦不要用在css樣式上，更多是用在js操作dom時(shí)，選擇元素。
如：

div{
	background: #fff;}.list {
	color: red;}

$('#li').html('<span>web秀</span>')

element element

div p?選擇?<div>?元素內(nèi)部的所有?<p>?元素。

element>element

div>p?選擇父元素為?<div>?元素的所有?<p>?元素。

element+element

div+p?選擇緊接在?<div>?元素之后的所有?<p>?元素。

[attribute]

[target]?選擇帶有 target 屬性所有元素。

[attribute=value]

[target=_blank]?選擇 target="_blank" 的所有元素。

[attribute~=value]

[title~=title]?選擇 title 屬性包含單詞 “flower” 的所有元素。

[attribute|=value]/[attribute^=value]

[lang|=en]?選擇 lang 屬性值以 “en” 開頭的所有元素。

[attribute$=value]

p[src$="e"] 選擇其 src 屬性以 “e” 結(jié)尾的所有?<p>?元素。

[attribute*=value]

p[title*="abc"]?選擇其 title 屬性中包含 “abc” 子串的每個(gè)?<p>?元素。

element1~element2

p~div 選擇前面有?<p>?元素的每個(gè)?<div>?元素。

A標(biāo)簽偽類選擇器

:link a:link 所有未被訪問的鏈接(a標(biāo)簽的默認(rèn)樣式)。

:visited a:visited 所有已被訪問的鏈接。

:active a:active 點(diǎn)擊后沒有松開鼠標(biāo)的鏈接。

:hover a:hover 鼠標(biāo)指針位于其上的鏈接。

:before / :after

在元素的內(nèi)容之前插入內(nèi)容。

div:before{
	content: '';
	display: block;
	background: red;
	width: 30px;
	height: 10px;}div:after{
	content: '';
	display: block;
	background: green;
	width: 30px;
	height: 10px;}

:first-child

p:first-child 匹配的是某父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素。(注意和:first-of-type做區(qū)分)

:first-of-type

p:first-of-type 匹配的是該類型的第一個(gè)，類型是指什么呢，就是冒號前面匹配到的東西，比如 p:first-of-type，就是指所有p元素中的第一個(gè)。這里不再限制是第一個(gè)子元素了，只要是該類型元素的第一個(gè)就行了，當(dāng)然這些元素的范圍都是屬于同一級的，也就是同輩的。(注意和:first-child做區(qū)分)

:last-child

p:last-child 表示其父元素的最后一個(gè)子元素，且這個(gè)元素是css指定的元素，才可以生效(注意和:last-of-type做區(qū)分)

:last-of-type

p:last-of-type 代表在一群兄弟元素中的最后一個(gè)指定類型的元素。(注意和:last-child做區(qū)分)

:only-child

p:only-child 選擇器選擇的是父元素中只有一個(gè)子元素，而且只有唯一的一個(gè)子元素

:only-of-type

p:only-of-type 表示一個(gè)元素他有很多個(gè)子元素，而其中只有一種類型的子元素是唯一的

:nth-child(n)

p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)?<p>?元素。

:nth-child(odd)或者:nth-child(2n+1)?奇數(shù)行、:nth-child(even)或者:nth-child(2n+2)?偶數(shù)行

:nth-last-child(n)

p::nth-last-child(n) 同上，從最后一個(gè)子元素開始計(jì)數(shù)。

:empty

p:empty 選擇沒有子元素的每個(gè)?<p>?元素（包括文本節(jié)點(diǎn)）。

:not(selector)

:not(p) 選擇非?<p>?元素的每個(gè)元素。

input狀態(tài)選擇器

:focus?獲得焦點(diǎn)的 input 元素

:enabled?每個(gè)啟用的 input 元素

:disabled?每個(gè)禁用的 input 元素

:checked?每個(gè)被選中的 input 元素

總結(jié)

以上是生活随笔為你收集整理的CSS选择器高级用法总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。