css3选择器

简单选择器 –
1 *{} /通配符: 选择body内所有元素,经常用于清除默认样式.
2 p{} /元素选择器.标签选择器: 直接写标签p li img span h1-h6….
3 #box{} /类选择器: (class =”box” class设置#选择) 类名可重复.
4 box{} / id选择器: (id=”box” id设置 .选择)  id名字唯一.
5 div p span后代.包含选择器: div下p下span元素.
高级选择器 --
1 p,span 组合.多元素选择器: 同时选择p span标签/元素 ,隔开
 .boxp,span(box失效会选择其他p span) .box p .box span代替
2 p>span子元素选择器:选择p的span子元素 >隔开
3 p+span相邻兄弟选择器: 选择p相邻的span元素 +隔开 只选择span4
4 p ~ .box 关联选择器: 选择p后的box类及后代
属性选择器 --
1 [href]{} 属性选择器: 选择具有href属性的元素
2 a[herf]{} 选择标签a具有herf属性的元素
3 [href=””]{} 选择指定属性值的元素
4 [href ~=”//”]{} 选择指定属性值包含//的元素 前后必须有空
5 [href |=”//”]{} 选择指定属性值以//开头的元 //开头
Css3
1 [href ^=”//”]{} 以//开头
2 [href $=”//”]{} 以//结尾
3 [href *=”//”]{} 包含//
伪类选择器 --
1 :hover /p:hover {} 鼠标移上去/移到p标签上去的样式
2 p:hover span{} 鼠标移到p标签后代span标签的样式
3 :link{} / a:link{} 未被访问链接的样式
4 :active{} / a:active{} 正在访问链接的样式
5 :visited{} / :visited{} 已被访问的链接的样式
6 :focus{} / input:focus{} 获取焦点/输入框获取焦点后的样式6 
伪元素  

1 p:before{content:”内容”;样式} 在p标签之前添加样式及内容
2 p:after{content:”内容”;样式}在p标签之后添加样式及内容 
.box:befter {
   content:”新加内容”;
   color: red;}
在类为box的元素里边前部添加”新加内容”,字体颜色红色。
css3
子类型
p:first-of-type{} 第一个 (泛指多个相同同时选择)
p:last-of-type{} 最后一个 (泛指多个相同同时选择)
p:last-of-type{} 最后一个 (泛指多个相同同时选择)
p:nth-of-type(3){} 第3个(泛指多个相同同时选择)
p:nth-last-of-type(3){} 倒序第3个 (泛指多个相同同时选择)
a: only-of-type{} 唯一子元素a (泛指多个相同同时选择)
子元素
p:first-child{} 选择同级p标签的第一个p标签
p:last-child{} 选择同级p标签的最后一个p标签
a:only-child{} 唯一子元素a
p:nth-child(n){} 选择同级p标签指定的p标签 n指定的  
p:not(.select){} 选择p同级非.select元素
p:empty{} 内容为空的p标签 嵌套有标签不为空
p:target{} 激活的锚点
p::selection{} 选中p标签 color background可变
li:nth-child(n+4){background:#090}  大于等于4的li标签
li:nth-child(-n+4){background:#090} 小于等于4的li标签
li:nth-child(2n){background:#090}  偶数的li标签  2n可以为even
li:nth-child(2n-1){background:#090}  奇数的标签 2n-1可以为odd
li:nth-child(3n+1){background:#090}  3n+1表示隔取1
 
表单元素
input:enabled{} 可用选择
<input type=”text” enabled=”enabled”>
input:disabled{} 不可用选择
<input type=”text” disabled=”disabled”>
Input:checked{} 选中选择
<input type=”check” checked=”checked”>