css3 选择器

css选择器复习：

css选择器优先级：!imponrant > 行内样式 > id选择器 > class选择器 > 标签选择器 > 通配符  > 继承 > 浏览器默认样式

1.基本选择器

选择器	类型	功能描述
*	通用选择器	选择所有元素
#id	ID选择器	选择id为id的元素
.class	类选择器	选择class为class的元素
element	元素选择器	选择指定类型的html元素（例：p、html、h1）
selector1,selectorN	群组选择器	将每一个选择器匹配的元素集合并

2.层次选择器

选择器	类型	功能描述
E  F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F	通用选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

3.动态伪类选择器

选择器	类型	功能描述
:link	链接伪类选择器	指向未被访问页面的链接设置样式
:visited	链接伪类选择器	指向未被访问页面的链接设置样式
:active	用户行为选择器	在点击时触发
:hover	用户行为选择器	指向未被访问页面的链接设置样式
:foucs	用户行为选择器	获取焦点触发

注： :foucs > :hover > :active

4.目标伪类选择器

选择器	功能描述
:target	突出活动锚  IE8+ 、safari、chrome、firefox、oprea

5.UI元素状态伪类选择器

选择器	类型	功能描述
:checked	选中状态伪类选择器	选择被选中的input元素（单选按钮或复选框）
:enabled	启用状态伪类选择器	选择启用状态元素 （大多数用于表单）
:disabled	不可用状态伪类选择器	选择禁用状态元素 （大多数用于表单）

6.结构伪类选择器

选择器	功能描述
E:first-child	匹配父元素的第一子元素E（等同于 nth-child(1)）
E:last-child	匹配父元素的最后一个子元素E（等同于 nth-last-child(1)）IE8+ 、safari、chrome、firefox、oprea
E:root	匹配元素E的所在文档的根元素（在html中根元素始终指向html）
E F:nth-child(n)	选择父元素E的第n个子元素F（n起始之为1）
E F:nth-last-child(n)	选择父元素E倒数的第n个子元素F（nth-last-child(1)始终为最后一个子元素和last-child等同）
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数的第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素（E:nth-of-type(1)等同）
E:last-of-type	选择父元素内具有指定类型的最后一个E元素（E:nth-last-of-type(1)等同）
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

注：

（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

（2），:nth-child(n)  中参数只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

7.否定元素选择器

选择器	功能描述
E:not(F)	匹配所有除元素F外的E元素

8. 属性选择器语法

选择器	功能描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。