css3 选择器
1.css2.1选择器
标签选择器 div()
类 .class()
id #id()
通配符 *{}
后代选择器 div p span
交集选择器 div.class#id
并集选择器 div,p,span,#id{}
2.关系选择器
儿子 div>p ie7开始兼容
下一个兄弟 div+p ie7开始兼容
后边所有兄弟 div>
jquery 都可以使用这些选择器，ie6 也可以兼容
3.属性选择器
在css3中，标签可以通过任何属性被选择
1)E[attr='val'] CSS3
选择属性attr的值为val的元素
2)E[attr^='val'] CSS3
选择具有attr 属性 并且值是以val开头的E元素
3)E[attr$='val'] CSS3
选择具有attr 属性 并且值是以val结束的E元素
4)E[attr*='val'] CSS3
选择具有attr 属性 并且值包含val的E元素
5)E[atrr|='val'] CSS3
选择具有attr属性，并且属性值是以-分隔，并且-前面的内容是val的E元素
6)E[attr~='val'] CSS3
选择具有attr属性，并且属性值是以空格分隔，并且空格后面是val的E元素
4.序选择器
儿子的序选择器， 类似于伪类选择器
1）p:first-child{}
选择一个p标签，这个p标签是其父元素的第一个儿子 ie7
2）p:last-child{}
选择一个p标签，这个p标签是其父元素的最后一个儿子 ie7
3) p:nth-child(n){}
选择一个p标签，这个p是其父元素的第n个儿子，ie9 n是从一开始
n是从1开始
p:nth-child(2n) 2,4,6,8...
p:nth-child(3n+8) 8，11.14.17。。。
注意：表达式中n从0开始，但是2n 最小只能取1，所以0是娶不到的；3n+8中，n从0开始，最小8
4)nth-last-child(n){}
选择一个p标签，这个p是其父元素倒着放的第n个儿子， ie9
p:nth-last-child(2n){}
倒着数所有偶数个p被选中
5)p:nth-of-type(n){}
选择一个p标签，这个p是其父元素中所有p儿子中的第n个，ie9
同类别中的第几个，只数p标签，其他标签不管
$('p').eq(3)
$('p:nth-child(3)')
5.伪类选择器
a标签的伪类选择器
:link :visited :hover :active
1):hover
可以给任何元素使用 ie7
2):focus
获取焦点，当一个表单元素获取焦点，触发这个样式
3):not
p:not(.pp)
选择p标签，不带类名为pp 的p标签
4):only-child
唯一的儿子
p:only-child()
如果一个p标签是其父亲唯一的儿子，就会被选中
5):empty
空标签
当一个标签首位相连，其中没有任何内容，包括空格换行tab等，即为空标签
<div></div>
6):checked
表单元素中单选框或复选框被选中时会触发这个样式
7):disabled :enabled id9
无效的表单元素和有效的表单元素
6.伪元素
:: 表示伪元素
伪元素必须书写的属性是content
1）::before ::after
这两个都是行内伪元素，需要转为块级元素或者脱标才能设置宽高
2) ::selection
被选中的文本样式 ie9
3)::first-letter ::first-line
第一个文字，和第一行文字
7.圆角
border-radius 单位px % em ie9
border-bottom-radius
border-bottom-left-radius