CSS3
1、复杂选择器
2、内容生成
3、多列
4、CSS Hack(浏览器兼容性)
*******************************
1、复杂选择器
1、兄弟选择器
1、作用
通过元素的平级关系来匹配其他元素
只能向后不能向前
2、分类
1、相邻兄弟选择器
匹配指定元素的相邻兄弟
相邻：紧紧挨在指定元素的后面
语法：
选择器1+选择器2
ex:
1、div+p{}
2、#content+.important{}
2、通用兄弟选择器
通用：某元素后面所有的兄弟元素
语法：
选择器1~选择器2
2、属性选择器
1、作用
允许使用元素所附带的属性及其值，来匹配页面的元素
2、语法
唯一一组以 [] 来进行表示的选择器
1、[attr]
attr:任意属性名称
作用：匹配 附带 attr 属性的元素
ex:
1、[id]
匹配页面所有附带 id 属性的元素
2、elem[attr]
elem : 表示任意元素
作用：匹配附带 attr 属性的 elem 元素
ex:
1、p[id]
3、elem[attr1][attr2]
作用：匹配页面中所有即附带attr1属性也同时附带attr2属性的elem元素
ex:
div[id][class]
4、elem[attr=value]
value:值
作用：匹配页面上 附带attr属性同时值为 value 的elem 元素
ex:
input[type=text] : 获取页面所有文本框
5、elem[class~=value]
作用：匹配 附带 class 属性的 elem元素，其中class属性的值是以空格隔开的值列表，value是值列表中的一个独立值。
6、elem[attr^=value]
^= : 以 value 作为开始
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为开始的
7、elem[attr$=value]
$= : 以 value 作为结束
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为结束的
8、elem[attr*=value]
*= : 包含 value 字符即可
3、伪类选择器
4、伪元素选择器
1、复杂选择器
1、兄弟选择器
1、相邻兄弟
选择器1+选择器2
2、通用兄弟
选择器1~选择器2
2、属性选择器
语法：[]
[attr]:匹配附带attr属性的元素
elem[attr]:... ...
elem[attr1][attr2]:
[attr=value]:
[class~=value]:
[attr^=value]:
[attr$=value]:
[attr*=value]:
3、伪类选择器
1、目标伪类
:target
2、元素状态伪类
:enabled,匹配被激活元素(表单控件)
:disabled,匹配被禁用元素(表单控件)
:checked,匹配被选中元素(radio，checkbox)
3、结构伪类
1、:first-child
2、:last-child
3、:nth-child(n)
4、:empty
5、:only-child
4、否定伪类
:not(选择器)
4、伪元素选择器
1、作用
匹配元素中的内容
2、语法
:first-letter,匹配元素的首字符
:first-line,匹配元素的首行
::selection,匹配用户选中的部分
注意： :与::的区别
2、内容生成
1、语法
1、伪元素选择器
1、:before,匹配元素内容区域之前
2、:after,匹配元素内容区域之后
2、属性
属性：content
取值：
1、字符串 ：普通文本,""
2、url() , 生成一副图像
3、计数器
3、解决问题
1、浮动元素的父元素高度问题
div:after{
content:"";
display:block;
clear:both;
}
2、外边距溢出
div:before/div:after{
content:"";
display:table;
}
4、计数器
1、声明或复位一个计数器
属性：
counter-reset:名 值 名 值;
值，可以省略，默认为0
注意：
1、不能将计数器声明在使用的元素中
2、设置计数器增量
属性：counter-increment:名 值;
值，可以省略，默认为1
注意：
1、哪个元素使用，就在哪个元素上声明增量
3、使用计数器
属性：content
取值：counter(名);
注意：
配合着:before或:after一起使用
3、多列
1、属性
1、分隔列
属性：column-count
2、列间隔
属性：column-gap
3、列规则
属性：column-rule:width style color;
2、兼容性
添加浏览器前缀
4、CSS Hack
1、CSS Hack方式
1、CSS 类内部hack
通过 属性前缀或值后缀的方式来编写指定浏览器能够识别的样式
hack 写法
* *color IE6,IE7
+ +color IE6,IE7
# #color IE6,IE7
- -color IE6
_ _color IE6
\0 color:red\0; IE8,IE9,IE10
\9\0 color:red\9\0; IE9,IE10
注意：
顺序问题
IE8,IE9,IE10(\0)
IE9,IE10(\9\0)
IE6,IE7(+)
IE6(-)
2、选择器Hack
在选择器前加上浏览器能够识别的前缀
* : IE6
*body{
/*IE6中body的样式*/
}
*+ : IE7
*+body{
/*IE7中body的样式*/
}
3、HTML都不引用Hack
通过HTML的条件注释
条件注释语法：
<!--[if 条件 IE 版本]>
内容
<![endif]-->
条件：
1、gt ：大于指定版本
2、gte ：大于等于
3、lt ：小于
4、lte ：小于等于
5、!不是指定版本
******************************
1、转换
2、过渡
3、动画
4、CSS 优化
******************************
1、转换
1、转换简介
1、什么是转换
改变元素在页面中的大小，位置，角度和形状的一种方式
2、转换分类
1、2D转换
使元素在x轴和y轴上发生变化效果
2、3D转换
在2D转换基础上，增加 z轴的变化效果
3、转换属性
属性：transform
取值：
1、none
默认值，不进行任何转换
2、转换函数
表示一个或者多个转换函数，如果是多个函数的话，中间以空格分开
4、转换原点
属性：transform-origin
默认情况下，原点是在整个元素的中心位置处
取值：数值/百分比/关键字
两个值：表示 x轴 和 y轴的位置
三个值：表示 x轴 ，y轴 ，z轴的位置
2、2D转换
1、2D位移
1、属性 和 函数
属性:transform
函数:
translate(x) :元素在x轴上的位移距离，取值为正，向右移动，取值为负，向左移动
translate(x,y) :
x表示x轴位移距离
y表示y轴位移距离，取值为正，向下移动，取值为负，向上移动
translateX(x) :只改变元素在x轴上的位置
translateY(y) :只改变元素在y轴上的位置
取值：
1、数值
2、百分比
2、2D缩放
1、作用
改变元素在页面中的大小
2、属性和函数
属性：transform
函数：
scale(value),如果只给一个值，那么x轴和y轴将等比缩放
scale(x,y):改变 x轴和y轴的缩放比例
scaleX(x):只改变x轴的缩放比例
scaleY(y):只改变y轴的缩放比例
取值：
默认值 为1
缩小：0~1 之间的数值
放大：大于1的数值
3、2D旋转
1、作用
改变元素在页面中的角度
2、属性 和 函数
属性：transform
函数：rotate(ndeg)
n取值为正，则顺时针旋转
n取值为负，则逆时针旋转
3、注意
1、转换时，坐标轴会一起进行转换
2、转换原点可以影响转换效果
4、2D倾斜
1、作用
改变元素在页面上的形状
2、属性 和 函数
属性：transform
函数：
skew(xdeg) : x轴倾斜指定角度
实际上时改变 y轴的倾斜角度
取值为正：逆时针
取值为负：顺时针
skewX(xdeg) : 效果同上
skewY(ydeg) : y轴倾斜指定角度
实际上是改变 x轴的倾斜角度
取值为正：顺时针
取值为负：逆时针
1、转换
1、属性
1、转换属性
transform:转换函数
2、transform-origin:转换原点
数值/百分比/关键字
3、transform-style
如何处理子元素位置
取值：
1、flat ：默认值
2、preserve-3d : 保留子元素3d位置
4、perspective
人眼到投射元素的距离
2、2D转换
1、位移
函数：
translate(x)
translate(x,y)
translateX(x)
translateY(y)
2、旋转
函数:rotate(ndeg);
3、缩放
函数：
scale(value)
scale(x,y)
scaleX(x)
scaleY(y)
4、倾斜
函数：
skew(x)
skew(x,y)
skewX(x)
skewY(y)
3、3D转换
1、3D旋转
rotateX(xdeg)
rotateY(ydeg)
rotateZ(zdeg)
rotate3D(x,y,z,ndeg)
2、3D位移
translateZ(z)
translate3D(x,y,z)
2、过渡
属性：
1、指定过渡属性
transition-property
2、指定过渡时长
transition-duration
以s|ms作为单位
3、指定 时间速度 曲线函数
transition-timing-function
ease,linear,ease-in,ease-out,ease-in-ount
4、指定 过渡延迟
transition-delay
5、transition
property duration timing-function dealy
3、动画
1、声明动画
@keyframes 动画名称{
0%{
动画开始时的样式
}
... ...
100%{
动画结束时的样式
}
}
@-moz-keyframes 动画名称{
0%{
动画开始时的样式
}
... ...
100%{
动画结束时的样式
}
}
@-webkit-keyframes 动画名称{
0%{
动画开始时的样式
}
... ...
100%{
动画结束时的样式
}
}
2、使用动画
将 声明好的动画绑定在指定的选择器上
属性：
1、animation-name
2、animation-duration
3、animation-timing-function
4、animation-delay
5、animation-iteration-count
取值：
1、绝对值
2、infinite
6、animation-direction
取值：
1、normal
2、reverse
逆向播放
3、alternate
轮流播放
7、animation
name duration timing-function delay iteration-count direction
8、animation-fill-mode
1、none
2、forwards
动画播放后，会保留在最后一帧上
3、backwards
动画播放前(延迟时间内)，会保留在第一帧上
4、both
前后都应用
9、animation-play-state
1、paused ：暂停
2、running ：播放
