2020.0410css3选择器

Css3中存在一些浏览器不能识别的语法规则（浏览器前缀），为了考虑兼容：低版本和高版本，就产生了渐进增强和优雅降级的存在。
渐进增强：先从最基本的版本开始保证最基本的功能都能实现，然后针对性的考虑高版本，提升用户体验。
优雅降级：开始就构造特别完美的需求方案，再针对性的，例如：通过减少用户体验，向低版本过渡。

一、Css属性选择器：通过HTML属性选择对应的标签。

1：选择符[属性名]{} 当一个元素有当前HTML属性值名称则匹配成功。
2：选择符[属性名=“属性值”] 属性和属性名都匹配成功才做选中。
3：选择符[属性~=“属性值”]当前属性的属性值为一个词列表（多个单词以空格隔开），只要有当前指定的词就能匹配。
4：选择符[属性^=“字符”]当这个属性值开头的时候被匹配（只要开头匹配就行）
5：选择符[属性&=“字符”]当这个属性值结尾的时候被匹配（只要结尾匹配就行）
6：选择符[*=”字符”]只要属性值里面包含有这个字符就能匹配
7：选择符[|=”字符”]属性值仅有当前字符或者以字符-开头的（left-con）就能匹配
二、结构性伪类选择器：通过第几个进行查找
H2:first-child{}选中h2所在整个集合里面的第一个H2
H2:last-child{}选中h2所在整个集合里面的最后一个h2
H2:nth-child(第几个){}通过第几个进行查找(第几个)even奇数，odd偶数，2n，2n+1
H2:nth-last-child(倒数第几个){}
H2:only-child{}当前集合里面只有一个h2才会被选中

H2:first-of-type{}选中h2所在整个集合里面的第一个H2
H2:last-of-type{}选中h2所在整个集合里面的最后一个h2
H2:nth-of-type(第几个){}通过第几个进行查找(第几个)even奇数，odd偶数，2n，2n+1
H2:nth-last-of-type(倒数第几个){}
H2:only-of-type{}当前集合里面只有一个h2才会被选中
总结：分析：当前同级元素是否为一类，如果费一类情况下，选用of-type选择。
补充：:root{}选中的是根元素
选择符:empty{}当 一个元素没有任何内容或者任何子元素的时候被选中。
三、目标伪类选择器
:targert
四、状态伪类选择器
:enabled 表单元素可用的时候执行样式
:disabled 表单元素禁用的时候执行
:checked 表单选中(单选 多选按钮选中的时候)
::selection 文本选中的时候的样式
五、动态伪类选择器
E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于锚点上。
E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过，常用于锚点上。
E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活，常用于链接锚点和按钮上。
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上，IE6及以下的浏览器仅支持a:hover
E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点。
六、层级选择器
1：子选择器
父元素选择器>子元素选择器，选中只是父元素最近一层的子元素。
2：兄弟元素选择器
元素1+元素2 同级 选中元素1同级离得最近的下面的兄弟元素2
3：通用选择器
元素1~元素2 同级 选中元素1同级下面所有的元素2