day11

1.css3新增选择器
1.属性选择器：
1.选中有attr属性的元素e e[attr]
2.选中有attr属性的元素e,属性值为val e[attr=‘val’]
3.选中有attr属性的元素e,属性值以v开头 e[attr^=‘v’]
4.选中有attr属性的元素e,属性值以v结尾 e[attr$=‘v’]

2.结构伪类选择器
选中第一个子元素e e:first-child
选中最后一个子元素e e:last-child
选中第n个子元素e e:nth-child(n)
选中倒数第n个子元素e e:nth-last-child(n)
括号中的n是乘法因子，可以是数字、单词、带n的数学表达式
选中唯一的子元素e e:only-child [主要用于场景判定]

注意：这里的排序指的是该元素在其父元素的所有子元素中的排序，不论种类哦！
type系列强调的是该元素在同类型兄弟元素之间的排序！

3.UI状态伪类选择器
选中可用的元素e e:enabled
选中不可以的元素e e:disabled
被选中的元素e e:checked

4.否定伪类选择器
e:not(f) 选中e元素中排除f之后剩下的所有元素。

5.目标伪类选择器
e:taiget 当e成为锚点跳转区域的时候，就是目标。

2.兼容性问题
概念：同一个页面再不同的浏览器或者版本中显示的效果不一致。
css3处理兼容性问题：添加私有前缀【面试题】
前缀 代表性浏览器 浏览器内核
-o- 欧朋 presto
-ms- IE trident
-moz- 火狐 gecko
-webkit- 谷歌、safari webkit
谷歌和欧朋联合研发的 blink
优雅降级：一开始先针对高版本浏览器完成所有功能，然后再针对低版本浏览器进行兼容，以保证能完成基本功能即可。向下兼容。
渐进增强：一开始针对低版本浏览器完成最基本功能，然后针对高版本浏览器添加各种酷炫的效果和功能。向上兼容

3.css3新增的属性
1.文字阴影
text-shadow：x的偏移 y的偏移 模糊程度 阴影的颜色；
2.盒子阴影
box-shadow：x的偏移 y的偏移 模糊程度 阴影的颜色 inset；
inset代表内阴影，没有就是外阴影
3.英文大小写转换
text-transform：uppercase大写 | lowercase小写 | capitalize首字母大写
4.圆角边框
border-radius：px | %；
使用百分比代表分别以宽度的百分比和高度的百分比绘制圆，如果宽高不一致就是椭圆！
5.背景图大小
background-size：宽度 高度；

4.z轴上的堆叠层次
z-index：数字；
每个元素默认为0，大的覆盖小的。可正可负。
注意：该属性要生效，元素身上必须设置非静态定位！