css3選擇器詳解

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

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

1	p{ }//所有p標簽的背景色為黃色

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

1	h1,p{ }//設置所有div中的h1和p的背景色為紅色

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

1	div p{ }//選擇div下的所有p背景色為綠色

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

1	div>p{}//父元素為div下的p標簽

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

1	div+p{}//緊挨著div元素的p標簽

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

1	a[target]{}//選擇a中有target屬性的標簽

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

1	a[target=_blank]{}//選擇a標簽中target屬性帶有_blank新窗口打開的屬性

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

1	[title~=flower]{ }//title 屬性包含單詞 "flower" 的所有元素

偽類選擇器

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

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

?a:visited 已被點擊的效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 2 3

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 選擇根元素

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

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

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

類別選擇器

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

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

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

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

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

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

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

轉載于:https://www.cnblogs.com/wjljw/p/5730817.html

總結

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

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