渐进增强:(从小到大)先保证最基本的功能~>用户体验的提升
优雅降级:(从大到小)现针对版本较高的设备进行项目构建,
保证用户体验的完美~>牺牲一些效果,保证基本的功能
属性选择器:e[attr]{}选中e元素,且e元素有attr属性
e[attr=“value”]{}选中e元素,且e元素有attr属性,包含值为value
e[attr~=“value”]{}选中e元素,且e元素有attr属性,包含值为value
e[attr^=“value”]{}选中e元素,且e元素有attr属性,以value开头
e[attr$=“value”]{}选中e元素,且有attr属性,以value结束
e[attr*=“value”]{}选中e元素,且有attr属性,包含value值
e[attr|=“value”]{}选中e元素,且有attr属性,仅有value值,以value-开头
结构伪类选择器:
:first-child{}选中第一个元素
:last-child{}选中最后一个元素
:nth-child{}n是从零开始
(even)2n 偶数列
(odd)2n-1 奇数列
:only-child{}选中只有一个同级元素
:nth-last-child(n){}选中第n个元素
:first-of-type{}指定类型的第一个元素
:last-of-type{}指定类型的最后一个元素
:nth-of-type(n){}指定类型的指定位置的元素
:only-of-type{}指定类型中只有一个同一类型的元素
:nth-last-of-type(n){}指定类型的指定位置的元素 倒着数
拓展:
:root{}选中html(根元素)
:empty{}空元素选中
ui元素状态伪类器:
:enabled{}选中可以输入的元素
:disabled{}选中不可输入的元素
:checked{}选中不可选中的元素
::selection{}被用户选中的内容处于高亮状态
链接伪类选择器:
:link初始状态
:visited{}访问过后的状态
用户行为选择器:
:hover{}鼠标移入的状态
:active{}鼠标按下的状态
:focus{}选中获取焦点的元素(光标在那里跳动)
08-16
08-16