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