CSS3 新增选择器——伪类|类别选择器

    CSS中除了早先最早的类ID选择器，class选择器一些以外在css3中新加入了新的选择器，新选择器的使用大大的方便了我们的编程，下面来看一下ss3中的伪类、类别选择器的使用方法。

伪类选择器

• 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:"hello";}//在p元素之前插入‘hello’在插入内容是需要用到content

• :after 在某元素之后插入内容

p:after{content:"word";}//在p元素之后插入‘word’在插入内容是需要用到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的元素设置样式