1、相邻兄弟选择器，通用兄弟选择器
2、属性选择器，理解下面语句
①[id]{color:red;} ②div[id]{color:red;}
③p[id][class]{color:red;} ④input[type=text]{color:red;}
⑤div[class~=heavy]{color:red;} ⑥[class^=”col-”]{color:red;}
⑦[class*=”col-”]{color:red;} ⑧[class$=”col-”]{color:red;}
3、目标伪类target使用
html <a href="#dd">点我跳转到div</a> <br/><div id="dd">字体颜色发生变化</div>
css #dd:target{ color:red;}
4、元素状态伪类解释 ①enable ②disable ③checked
5、结构伪类 li:first-child{color: red;}与li{color: red;} 区别
li:last-child{color: red;}
li:nth-child(2){color: purple;}
6、否定伪类 li:not(:first-child){color:red;}
7、伪元素选择器 p:first-line
p:first-letter
p.article:first-letter{color: #FF0000;}
<p class="article">This is a paragraph in an article。</p>
8、使用伪元素选择器实现内容生成
标签内容区域前插入文字：标签:before{content:"插入的内容";}
标签内容区域前插入图片：标签:before{content:url(...);}
标签内容区域后插入文字：标签:after{content:"插入的内容";}
标签内容区域后插入图片：标签:after{content:url(...);}
9、使用选择器插入项目编号
元素:before{content:counter(计数器);}
元素{counter-increment:content属性值中所指定的计数器名称}
使用计数器来计算编号，计数器可以任意命名，除了使用计数器还需要在元素的样式中追加对元素的(counter-increment)属性指定为content属性值中所指定的计数器名称。
p:before{content: "第"counter(number)"章、";}
p{counter-increment: number;}
10、CSS Hack 针对不同浏览器编写不同的CSS文件
①CSS类内部hack：在样式属性名或值前后增加前后缀识别不同浏览器（div{color:red\9\0;}）
-:IE 6 +:IE 6,7 \0:IE 8,9,10 \9\0:IE 9,10
②头部引用Hack
<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->
<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->
<!--[if gte IE 6]>这段文字只在IE6及以上版本IE浏览器显示<![endif]-->
<!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->
③主流浏览器内核及属性前缀
| 浏览器 |
内核 |
属性前缀 |
| Chrome/safari(苹果) |
webkit |
-webkit |
| Firefox |
Gecko |
-moz |
| IE/国内各浏览器 |
trident |
-ms |
| Opera |
opera |
-o |
11、webkit内核的Chrome和Safari使用CSS3属性大都需要加上-webkit-前缀，最好把其余前缀的都重写一遍
12、转换：改变元素在页面中的大小，位置，形状，角度的一种方式
①2D转换
移动 transform:translate(50px,50px);/*translateX(),translateY()*/
缩放 transform:scale(2); /*scaleX(),scaleY()*/
旋转 transform:rotate(45deg);
旋转原点transform-origin:left top; /*也可以用百分比transform-origin:20% 40%;*/
倾斜 transform:skew(45deg); /*skewX(),skewY()*/
多种效果同时实现transform:translate(100px,100px) scale(2) rotate(5deg) skewY(45deg);
transform-origin:right top;
②3D转换
3D位移：包括translateZ()和translate3d()两个功能函数；
3D旋转：包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：包括scaleZ()和scale3d()两个功能函数；
③利用3D转换制作一个正方体
12、过渡 过渡设置简写 transition:
property（要使用过渡效果的属性）
duration（过渡时长）
timing-function（过渡时间速率|ease慢快慢| linear匀速|ease-in-out慢快慢）
delay（过渡延时）
案例 HTML： <div></div>
CSS：
div{
width: 200px;height: 200px;
background-color: purple;
transition: transform 3s;
}
div:hover{ transform: translateX(400px) rotateY(90deg) rotate(360deg); }
13、动画
①声明
第一种声明：@keyframes 动画名称{
0%{动画开始时的样式} 50%{动画中间时的样式} 100%{动画结束时的样式}
}
0%时也可以用from，100%用to
第二种声明：@keyframes 动画名称{
from{动画开始时的样式} to{动画结束时的样式}
}
②调用（一般在hover中调用，如果想页面一运行就有，在元素的样式中调用）
animate:name(调用的动画的名称)
duration(动画完成一个周期的时间)
timing-function（过渡时间速率|ease慢快慢| linear匀速|ease-in-out慢快慢）
play-state(规定动画是播放还是暂停，paused暂停，running播放)
iteration-count(规定播放次数n infinite一直循环播放)
14、CSS代码优化
①提前定义统一样式，利用CSS的继承性
②尽量缩小样式文件（简写属性，空格回车少些）
③避免样式重写
④代码压缩（使用代码压缩软件）
⑤避免空的src和href，即使是空的，还会请求服务器，#不会
⑥别再页面中改变图片大小