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的元素设置样式 |
先向大家介绍这些有不足之处请大家指教谢谢！
)
)
