标签：fir 体验 增强 版本 功能 c99 css 针对 selection
1、渐进增强:(从小到大)
先保证最基本的功能 ~> 用户体验的提升
优雅降级:(从大到小)
先针对版本较高的设备进行项目构建,保证用户体验的完美 ~>牺牲一些效果,保证最基本的功能
2、选择器(选择符):
id class 类型(div span...) 后代选择器 伪类选择器 伪元素选择器...
（1）属性选择器:
e[attr] 选中e元素,且e元素有attr属性 例如：li[class]{background: pink;}
e[attr="value"] 选中e元素,且e元素有attr属性,值为value 例如：li[title="list"]{color:yellow;}
e[attr~="value"] 选中e元素,且e元素有attr属性,包含值value 例如：li[class~="list3"]{background: blue;color:yellow;font-size:40px;}
e[attr^="value"] 选中e元素,且元素有attr属性,以value值开头 例如：li[class^="list3"]{background: purple;color:#fff;font-size:30px;}
e[attr$="value"] 选中e元素,且有attr属性,以value值结尾 例如：li[class$="list2"]{font-size:40px;color:skyblue;background: gold;}
e[attr*="value"] 选中e元素,且有attr属性,包含value值
e[attr|="value"] 选中e元素,且有attr属性,仅有value值,或者以value-开头
（2）结构伪类选择器:
:first-child{} 选中第一个元素
:last-child() 选中最后一个元素
:nth-child(n){} n是从0开始的,
2n 偶数列 even
2n-1 奇数列 odd
:only-child{} 选中只有本身一个同级的元素，
有很多同级元素,但是只有一个a标签 a :only-of-type{};
没有其他同级元素,只有一个a标签 a:only-child{};
:nth-last-child(n){} 倒数第n个元素
分类：span的第一个span: first-of-type{}
p中的第一个 p:first-of-type{}
(3)uI元素状态伪类选择器
:enabled{} 选中可以输入的元素 例如：input:enabled{background: red;
:disabled{} 选中不可输入的元素
:checked{} 选中被选中的元素
::selection{} 被用户选中的内容处于高亮的状态 例如：p::selection{background: yellow;color:red;}
(4)动态伪类选择器
链接伪类选择器
:link{} 初始状态
:visited{} 访问过后的状态
用户行为选择器
:hover{} 鼠标移入的状态
:active{} 鼠标按下的状态
:focus{} 选中获取了焦点(光标在哪里跳动)的元素
（5）层级选择器
.box a{color:red;font-size:30px;} box下的所有a标签都会被选中
.box>a{color:red;font-size:30px;}box下的a标签会被选中，但a标签里的a标签不会被选中，即儿子会被选中，孙子不会被选中。
p + a{color:red;font-size:30px;}选中紧跟在p后面的第一个a标签
p ~ a{color:red;font-size:30px;}选中紧跟在p后面的所有a标签
标签：fir 体验 增强 版本 功能 c99 css 针对 selection
原文地址：https://www.cnblogs.com/xsqlj/p/12537470.html
