CSS3选择器

SS3选择器

渐进增强

渐进增强（ progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级

渐进增强 （progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

上面两个的区别

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

选择器有以下几种：

属性选择器、结构性伪类选择器、目标伪类选择器、UI 元素状态伪类选择器、动态伪类选择器、层级选择器。

属性选择器

1: 选择符[属性名] 只要带有当前属性名就会被选中。
2: 选择符[属性名=“属性值”] 不仅制定属性名，有指定属性值
3: 选择符[属性名~=“属性值”] 属性值为一个词列表，只要包含当前词就会被选中
4: 选择符[属性名^=“属性值”] 属性值必须是当前指定的属性值开头的
5：选择符[属性名$=“属性值”] 属性值必须是当前指定的属性值结尾的
6: 选择符[属性名*=“属性值”] 属性值中只要包含了指定的字符就会被选中
7: 选择符[属性名|=“属性值”] 属性值仅是当前指定的属性值，或者是以属性值- 开头 （ left-con ）

结构性伪类选择器( 选择谁 选择符就行写谁 )

如果子集标签类型一致（类名一致）的情况下：采用的是 child
1:empty
选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用:empty选择器来控制。

2 : 选择符:first-child{ }
选择器表示的是选择父元素的第一个子元素的元素。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。


3 : 选择符:last-child{ }
:last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。


4 : 选择符:nth-child(val){}
val :
可以是某个数值 表示第几个
2n 或者 even 偶数
2n + 1 或者 odd 奇数




5 : 选择符:nth-last-child(){} 倒数第几个


6 : 选择符:only-child{} 当前子集只有一个元素的时候才会被选择


7 : target 选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
如果子集合标签类型不一致（类名不一致）的情况下：采用的是 of-type
of-type 先确定类型，把不同类型的先剔除。剩下同类的进行第几个选择。
1 : 选择符:first-of-type{ }
2 : 选择符:last-of-type{ }
3 : 选择符:nth-of-type(val){}
val :
可以是某个数值 表示第几个
2n 或者 even 偶数
2n + 1 或者 odd 奇数
4 : 选择符:nth-last-of-type(){} 倒数第几个
5 : 选择符:only-of-type{} 当前子集只有一个元素的时候才会被选择
拓展：
：root 选择的是根元素 html

UI元素状态伪类选择器

E:enabled
匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled
匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked
匹配所有用户界面（form表单）中处于选中( 单选、多选 )状态的元素E
E::selection
匹配E元素中被用户选中或处于高亮状态的部分

动态伪类选择器

E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover


E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点