css3选择器详解

　　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的元素设置样式

先向大家介绍这些有不足之处请大家指教谢谢！