前言：
我买了一本《图解CSS3核心技术与案例实战》大漠写的，为了提高自己的自觉性呢，抓紧看书，把读书笔记放在这上面，跟大家一起分享，也为督促自己完成读书计划。
文末有微信公众号，感谢你的扫一扫关注···
第1章 揭开CSS3的面纱
渐进增强：开发方式、Web设计理念
网站是否需要在每个浏览器看起来一样？
首先保持最核心的功能能实现，让低端浏览器看到站点内容，然后考虑使用高级但非必要的CSS和JavaScript等增强功能，为当前和未来的浏览器提供更好的支持，带来用户体验。
优雅降级：先考虑低端设备用户能否看到所有内容，然后在此基础之上为高端用户进行设计，不仅为高端设备用户提供一个完美的应用，也要求为不同性能级别设备的用户设计不用级别的不那么完美的应用。
1、 强大的CSS3选择器
2、 抛弃图片的视觉效果
3、 背景的变革
4、 盒模型变化
5、 阴影效果
6、 多列布局和弹性盒模型布局
7、 Web字体和Web Font图标
8、 颜色和透明度
9、 圆角和边框的新法
1、盒模型的变形
2、CSS3过渡和动画交互效果
3、媒体特性和Responsive布局
背景渐变、圆角、文本框发光、阴影
第2章 CSS3选择器
选择器分类
1、 基本选择器
2、 层次选择器
3、 伪类选择器
1、 动态伪类选择器
2、 目标伪类选择器
3、 语言伪类选择器
4、 UI元素状态伪类选择器
5、 结构伪类选择器
6、 否定伪类选择器
4、 伪元素
5、 属性选择器
清除浮动经典方法
<style>
.clearfix:after , . clearfix:before{ display:table;content:”” }
.clearfix:after{ clear:both;overflow:hidden }
</style>
<ul class=’clearfix demo’>
<li></li>
<li></li>
</ul>
class=’clearfix demo’
多类选择器，通过>=2的类选择器组合，来定义
层次选择器
E F 后代选择器 匹配F被包含在E元素内
E>F 子选择器 匹配的F是E元素的子元素
E+F 相邻兄弟选择器 匹配的F紧邻E元素后
E~F 通用选择器 匹配的所有F位于E元素后
伪类选择器
1、 动态伪类选择器
:link :visited :hover :active :focus
2、 目标伪类选择器
E :target F 选取链接的目标元素，提供样式
手风琴效果、高亮显示脚注、tabs效果、幻灯片效果、灯箱效果、相册效果
(有一些使用js效果更佳)
3、 语言伪类选择器
多语言版本网站，不同字体风格
1、 HTML5
<!DOCTYPE HTML>
<html lang=’en-US’>
2、< html lang=’fr’>
英文版本
:lang(en)｛quotes:’ ” ’ ‘ ” ’;｝
:lang(en) q ｛background:red;｝
法文版本
:lang(fr)｛quotes:’ << ’ ‘ >> ’;｝
:lang(fr) q ｛background:green;｝
4、 UI元素状态伪类选择器
a) E:checked 选中状态
b) E:enabled 启用状态
c) E:disabled 不可用状态
5、 结构伪类选择器
a) E:first-child 等同 E:nth-child(1) 父元素的第一个子元素
b) E:last-child 等同 E:nth-last-child(1) 父元素的最后一个子元素
c) E:root 匹配元素E所在文档的根元素html
d) E F:nth-child(n) 选择父元素E的第n个子元素F
n=1、2、3 even odd 或者公式（2n+1、-n+5）
e) E F:nth-last-child(n) 选择父元素E的倒数的第n个子元素F
f) E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
g) E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素
h) E:first-of-type 选择父元素内具有指定类型的第一个E元素 等同E:nth-of-type(1)
i) E:last-of-type 选择父元素内具有指定类型的倒数一个E 等同E:nth-last-of-type(1)
j) E: only-child 选择父元素只包含一个子元素，且子元素匹配E
k) E: only-of-type 选择父元素只包含一个同类型子元素，且子元素匹配E
l) E: empty 选择没有子元素的元素，且元素不含文本节点
6、否定伪类选择器
E:not(F) 匹配所有除元素F以外的E元素
.gallery:hover li:not(:hover)｛｝
伪元素
::first-letter{} 下沉字母或者首字母
::first-line{} 匹配第一行文字
::before{} ::after{}
不是指存在于标记内的内容
而是可以插入额外内容的位置，不会成为DOM部分
设置页面上所有外部链接之后的括号中附加他们指向的URL
a[href^=http]::after{
content=” (“ attr(href) ”) ”;
}
用于链接添加icon效果
@font-face
::selection 匹配突出选中文本 background && color
属性选择器
E[attr] 选择匹配具有属性attr的E元素，E也可以省略，表示定义了attr属性的任意类型
E[attr=val]
E[attr|=val] 匹配val、val开头
E[attr~=val] 字符串、单词匹配
E[attr*=val] val在实际val的截取之内
E[attr^=val] 匹配val开头
E[attr$=val] 匹配val结尾
^匹配起始符 $匹配终止符 *匹配任意字符
分享一下我的微信公众号，分享摄影与编程，谢谢大家的关注
