1 渐进增强和优雅降级
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后在针对高级浏览器进行效果、交互等改进和最佳功能达到更好的用户体验。
优雅降级:一开始就构建完整的功能,然后在针对低版本浏览器进行兼容。
优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
2 CSS3选择器
2.1 属性选择器
a[title]
a[title=baidu] 选中title属性为baidu
a[href*=sina] href包含sina的元素
a[href^=http] href属性值以value(http)开始的a标签
a[href$=com] href属性以com结尾的a标签
注:若选择的值含有"."、”:"等特殊字符,则需引号包含
2.2 伪类选择器
2.2.1 结构伪类(位置伪类)
:link,:visited,:hover,:active;
ul:first-child 选中第一个ul ul:last-child 选中最后一个ul
li:nth-child(3) 使用条件:是它父元素的第三个子元素且必须是一个li标签
li:nth-last-child(3):倒数第三个元素
2.2.2 空伪类
E:empty 选中没有任何子节点的元素,子节点中没有任何内容(包括空格)
2.2.3 目标伪类
E:target 结合锚点进行使用,处于当前锚点的元素会被选中
2.2.4 排除伪类
E:not(selector)除selector选择器之外的元素
2.2.5 UI状态伪类选择器
:enble
:disable
:checked
::selection 设置被鼠标选中时的样式,给器设置背景和文本颜色,不能设置其他属性
2.3 伪元素选择器
E::first-letter 第一行的第一个文字
E ::first-line 文本第一行
E::selection 可改变选中文本的样式
E::befor和E::after
":"和"::"区别在于区分伪类和伪元素
2.4 层次选择器
2.4.1 后代选择器
(子孙)后代选择器(也叫包含选择器) div p
(儿子)子元素选择器 div>p
(兄弟)相邻选择器 div+p 选择紧跟在div后面的p标签 eg:li+li
(兄弟)通用选择器 div~p 选中div后面所有的兄弟p标签
2.5 其他选择器
p:only-child 是某个元素中的且只为父元素中的唯一一个子元素
p:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
:root 选择文档的根元素 是指位于文档树中最顶层结构的元素
3 私有属性
CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。
-wekit- 谷歌 -moz- 火狐 -ms- IE浏览器 -o- 欧朋
4 CSS3新增属性
4.1 文字阴影
text-shadow:10px 10px 10px 10px red;
/* 水平偏移量 垂直偏移量 模糊程度 阴影大小 阴影颜色 */
多个阴影使用逗号分隔
注意:模糊度不能为负值
4.2盒子阴影
box-shadow:10px 10px 10px pink inset;
/* inset设置为内阴影 */
4.3英文换行
word-break:break-all(粗暴的断句)/keep-all(默认值,文本不会换行);
4.4圆角
border-radius
/* 1个值 四个角
2个值 左上角和右下角、右下角和左下角
3个值 左上角、右下角和左下角、右下角
4个值 左上、右上、右下、左下(顺时针)
单个设置border-(上下)-(左右)-radius */
4.5 CSS3颜色特性
rbga(255,255,255,0.1) a 透明度 取值范围0~1