css中除了早先最早的，ID選擇器，class選擇器一些以外在css3中新加入了新的選擇器，新選擇器的使用大大的方便了我們的編程，下面我就說一些css3的選擇器的使用方法，

p 選擇了所有<p>元素的標簽;

p{ background-color:yellow;}//所有p標簽的背景色為黃色

div,p 這是選擇了所有div和p元素標簽；

h1,p{ background-color:red;}//設置所有div中的h1和p的背景色為紅色

div p 這個標簽是選擇div下的所有p標簽，注意這與上條有明顯區別的；

div p{ background-color:green;}//選擇div下的所有p背景色為綠色

div>p 這個標簽是父元素標簽的div下所有p標簽;

div>p{background-color:yellow;}//父元素為div下的p標簽

div+p 這個是div緊接之后的所有p元素；

div+p{background-color:yellow;}//緊挨著div元素的p標簽

[target] 選擇所有帶有target屬性的元素；

a[target]{background-color:yellow;}//選擇a中有target屬性的標簽

[target=_blank] 選擇所有帶有target=_blank屬性的元素；

a[target=_blank]{background-color:yellow;}//選擇a標簽中target屬性帶有_blank新窗口打開的屬性

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

[title~=flower]{ background-color:yellow;}//title 屬性包含單詞 "flower" 的所有元素

偽類選擇器

a:link 尚未點擊的超鏈接樣式

a:link{color:black;}//未點擊的超鏈接的字體顏色為黑色

a:visited 已被點擊的效果

a:visited{color:red;}//a超鏈接點擊之后的文字顏色為紅色

a:hover //鼠標經過時超鏈接的樣式

a:hover{color:oringe;}//鼠標經過時超鏈接字體的顏色為橙色

a:active 設置活動鏈接的樣式

a:active{color:yellow;}//為活動鏈接設置樣式

:fouce 獲得獲得焦點并設置樣式

input:fouce{color:blue;}//為input的獲得焦點設置字體顏色

:blur 可以為失去點焦是設置樣式

input:blur{color:black;}//為input失去焦點設置樣式

:first-letter 為元素首字母設置樣式

p:first-letter{dont:28px;}//為所有p元素的首字母設置字體為28px

:first-line 為元素首行設置樣式

p:first-line{background:black;color:white;}//元素首行設置背景樣式和字體顏色

:first-child 為元素的第一個子元素設置樣式

p:first-child{background:yellow;}//為p元素中第一個子元素設置背景色

:before 在某元素之前插入內容

p:before{content:"你好";}//在p元素之前插入‘你好’在插入內容是需要用到content

:after 在某元素之后插入內容

p:after{content:"謝謝";}//在p元素之后插入‘謝謝’在插入內容是需要用到content

:first-of-type 選擇父元素的第一個元素

p:first-of-type{background:blue;}選擇父元素的第一個p元素設置樣式

:last-of-type選擇父元素的最后個元素

p:last-of-type{background:green;}選擇父元素的最后一個p元素設置樣式

:nth-of-type(n) 括號中寫幾代表選中第幾個元素n代表所有元素（不是從0開始）

 p:nth-of-type(n){background:red;}//選擇所有p元素設置樣式
 p:nth-of-type(even){background:red;}//選擇偶數p元素設置樣式
 p:nth-of-type(odd){background:red;}//選擇奇數p元素設置樣式

:root 選擇根元素

:root{background:red;}設置html背景色為紅色

:empty 選擇沒有子元素的每個元素（包括文本節點和空格）

p:empty{ background:black;}//選擇沒有任何內容（包括空格）的p元素設置樣式

類別選擇器

div[id^="ps"] 選擇其id屬性值以 “ps" 開頭的每個 <div> 元素。

div[id^="test"]{background:red;}//為每個div類名中前四個為test的設置樣式

div[id$=".pdf"] 選擇div其id后四位以.pdf為結尾的元素

div[id$=".pdf"]{background:yellow;}選擇div其id后四位以.pdf為結尾的元素設置樣式

div[id*="abc"] 選擇div其只要含有abc的元素

div[id*="abc"]{background:blue;}選擇div其只要含有abc的元素設置樣式

先向大家介紹這些有不足之處請大家指教謝謝！

總結

以上是生活随笔為你收集整理的css3选择器详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。