理念
1、优雅降级 从大范围到小范围
2、渐进增强 从小范围到大范围
属性选择器
E（标签） attr（属性） value（属性值）
1、E[attr] 只使用属性，没有确定任何属性值
2、E[attr="value"] 指定了属性和属性值，且必须一模一样，多或少都不行
3、E[attr~="value"] 只要属性值中有""里的词就可以
4、E[attr^="value"] 只要属性值中有""里的第一个字母或者空格就可以
5、E[attr$="value"] 只要属性值中有""里的结尾字母就可以
6、E[attr*="value"] 只要属性值中有""里的某个字就可以
7、E[attr|="value"] 只要属性值中有""里的词或者以"value-"开头的词就可以
伪类选择器
动态伪类语法
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
focus 获取焦点
说明：
1、当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
2、为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。
UI状态伪类
只用于form表单
1、disable 禁用的有变化
2、checked 默认选中的有变化
3、enabled 除了禁用的都有变化
结构伪类
1、first-child 改变某个元素中的第一个子元素
2、last-child 改变某个元素中的最后一个子元素
3、nth-child 改变某个元素中的某个子元素
4、nth-of-type 改变某个父元素中同类型的某个子元素
结构伪类解析
1、empty 空的且指定的会变（指定的元素里没有内容）
2、-child结尾 先解析冒号后面的，在解析前面的
3、-type结尾 先选择同类型的标签，在筛选给出的条件
4、only开头 父元素中唯一一个同类型的子元素
否定伪类
结构伪类前加not
根伪类
：root（指html）
目标伪类
：target
该元素的id当页面中的连接
锚点对应的div加!importion
语言伪类
:lang(语言缩写)
例如<p><q lang="no"></q>文字内容</p>
q：lang（no） quotes
伪元素
1、::selection 选中后的样式
2、::before
3、::after
4、::first-letter 元素内第一个字
5、::first-line 元素内第一行
层次选择器
1、后代选择器 （E F） 所有的子元素
2、子元素选择器 (E>F) 只到儿子辈的子元素
3、相邻兄弟选择器 (E+F) 紧挨着父元素的第一个元素（和父元素同级）
4、通用兄弟选择器 (E~F ) 父元素后面的所有同级元素