css3 选择器
基本选择器
选择器分类
通配符选择器
*{} 通过正则表达式匹配所有的元素
元素选择器
body{}
类选择器
.list{} //list这个类前面加一个点号
ID选择器
#list{} //list这个类前面加一个#
后代选择器
.list li{}//li是list这个类的后代
新增加的：
子元素选择器
概念：只能选择某元素的子元素，子元素的子元素不管
语法：父元素 > 子元素
兼容：IE8+/FireFox/Chrome/Safari/Opera
相邻兄弟元素选择器
概念：相邻兄弟选择器可以选择紧接在另一个元素后面的元素，并且他们需要具备相同的父元素
语法：指定元素 + 兄弟相邻元素
兼容：IE8+/FireFox/Chrome/Safari/Opera
通用兄弟选择器
概念：选择某元素后面所有的兄弟元素，且他们具有相同的父元素
语法：指定元素 ~ 兄弟相邻元素
兼容：IE8+/FireFox/Chrome/Safari/Opera
群组选择器
概念：具有相同样式的元素分组在一起，每个选择器之间用英文逗号隔开
语法：元素1,元素2,...,元素n
兼容：IE6+/FireFox/Chrome/Safari/Opera
属性选择器
对带有指定属性的HTML元素设置样式，可以只指定元素的某个属性，或时指定元素的某个属性和其对应的属性值
Element[attribute= "value"] 为带有attribute属性的Element元素设置样式
Element[attribute= "value"] 为attribute= "value"属性的元素设置样式
Element[attribute^= "value"] 设置attribute属性值以value开头的所有Element元素样式
Element[attribute$= "value"] 设置attribute属性值以value结尾的所有Element元素样式
Element[attribute*= "value"] 设置attribute属性值包含value的所有Element元素样式 实用
Element[attribute|= "value"] 设置attribute属性为value或以“value-”开头的元素样式 实用
伪类选择器
1.动态伪类 不存在与html中，只有当用户和网站交互时才能显示出来
锚点伪类
:link 超链接自带的效果，蓝色下划线
:visited 访问过的链接
用户行为伪类
:hover 鼠标经过时候的效果
:active 鼠标单点
:focus 例如表单中网页加载时立刻获取光标的元素怎么呈现
2.UI元素状态伪类 :enabled :disabled :checked 伪类称为UI元素状态伪类
input 可输入状态enabled 不可输入disabled 单选框、复选框选中checked
兼容性：
IE9+ FireFox Chrome Safari Opera
3.CSS3结构体
:nth选择器也称为CSS3结构类
选择方法：
:first-child
选择父元素的首个子元素的每个Element，并为其设置样式
IE8+ FireFox Chrome Safari Opera
:last-child
选择父元素的最后一个子元素的每个Element，并为其设置样式
:nth-child(N) 不找类型，所有同级的类型都计数
选择属于其父元素的第N个子元素，不论元素的类型
IE9+ FireFox4+ Chrome Safari Opera
关于参数N
:nth-child(n)
n是一个简单的表达式取值从0开始，这里只能是n不能是其他字母
可以用2n表示偶数，2n+1表示基数 3n是3的倍数 n+4从4个开始到以后的
:nth-child(odd) 基数
:nth-child(even)偶数
:nth-last-child(N)
从最后一个自元素开始计数，匹配属于其元素的第n个子元素的每个元素，不论元素类型
IE9+ FireFox4+ Chrome Safari Opera
主：是从1开始计数的，不是从0开始计数
:nth-of-type(N) 先找到目标类型，在开始数第几个
匹配属于父元素的特定类型的第N个子元素的每个元素
IE9+ FireFox4+ Chrome Safari Opera
:nth-last-of-type()
匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个元素开始计数
IE9+ FireFox4+ Chrome Safari Opera
:firse-of-type
匹配属于其父元素的特定类型的首个子元素的每个元素
IE9+ FireFox Chrome Safari Opera
:last-of-type
匹配属于其父元素的特定类型的最后一个子元素的每个元素
IE9+ FireFox Chrome Safari Opera
:only-child
元素1:only-child 看看这个父类是不是只有一个元素，然后看是不是之情的元素1 匹配属于父元素的唯一子元素的每个元素
IE9+ FireFox Chrome Safari Opera
:only-of-type 只要指定type的元素，在父元素中只存在一个即可，其他的类型存在也无所谓
匹配属于父元素的特定类型的唯一子元素的每个元素
IE9+ FireFox4+ Chrome Safari Opera
:empty
匹配没有任何子元素（包括文本节点）的每个元素
IE9+ FireFox4+ Chrome Safari Opera
4.否定选择器
:not(Element/selector)匹配非指定元素/选择器的每个元素
语法格式：父元素:not(子元素/子选择器) father:not(children/selector)
IE9+ FireFox4+ Chrome Safari Opera
