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的元素設置樣式 |
?先向大家介紹這些有不足之處請大家指教謝謝！
)
)
