1 复杂选择器
2 内容生成
3 多列
4CSS Hack(浏览器兼容性)
*******************************
1 复杂选择器
1 兄弟选择器
1 作用
通过元素的平级关系来匹配其他元素
只能向后不能向前
2 分类
1 相邻兄弟选择器
匹配指定元素的相邻兄弟
相邻: 紧紧挨在指定元素的后面
语法:
选择器 1 + 选择器 2
- ex:
- 1div+p{}
- 2#content+.important{}
2 通用兄弟选择器
通用: 某元素后面所有的兄弟元素
语法:
选择器 1~ 选择器 2
2 属性选择器
1 作用
允许使用元素所附带的属性及其值, 来匹配页面的元素
2 语法
唯一一组以 [] 来进行表示的选择器
1[attr]
attr: 任意属性名称
作用: 匹配 附带 attr 属性的元素
- ex:
- 1[id]
匹配页面所有附带 id 属性的元素
2elem[attr]
elem : 表示任意元素
作用: 匹配附带 attr 属性的 elem 元素
- ex:
- 1p[id]
- 3elem[attr1][attr2]
作用: 匹配页面中所有即附带 attr1 属性也同时附带 attr2 属性的 elem 元素
- ex:
- div[id][class]
- 4elem[attr=value]
value: 值
作用: 匹配页面上 附带 attr 属性同时值为 value 的 elem 元素
ex:
input[type=text] : 获取页面所有文本框
5elem[class~=value]
作用: 匹配 附带 class 属性的 elem 元素, 其中 class 属性的值是以空格隔开的值列表, value 是值列表中的一个独立值
6elem[attr^=value]
^= : 以 value 作为开始
作用: 匹配附带 attr 属性的 elem 元素, 并且该属性值是以 value 作为开始的
7elem[attr$=value]
$= : 以 value 作为结束
作用: 匹配附带 attr 属性的 elem 元素, 并且该属性值是以 value 作为结束的
8elem[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 结构伪类
- first-child
- last-child
- nth-child(n)
- empty
- only-child
4 否定伪类
:not(选择器)
4 伪元素选择器
1 作用
匹配元素中的内容
2 语法
:first-letter, 匹配元素的首字符
:first-line, 匹配元素的首行
::selection, 匹配用户选中的部分
注意: : 与:: 的区别
2 内容生成
1 语法
1 伪元素选择器
1:before, 匹配元素内容区域之前
2:after, 匹配元素内容区域之后
2 属性
属性: content
取值:
1 字符串 : 普通文本,""
2url() , 生成一副图像
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 兼容性
添加浏览器前缀
4CSS Hack
1CSS Hack 方式
1CSS 类内部 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 的样式 */
- }
3html 都不引用 Hack
通过 HTML 的条件注释
条件注释语法:
<!--[if 条件 IE 版本]>
内容
<![endif]-->
条件:
1gt : 大于指定版本
2gte : 大于等于
3lt : 小于
4lte : 小于等于
5! 不是指定版本
******************************
1 转换
2 过渡
3 动画
4CSS 优化
******************************
1 转换
1 转换简介
1 什么是转换
改变元素在页面中的大小, 位置, 角度和形状的一种方式
2 转换分类
12D 转换
使元素在 x 轴和 y 轴上发生变化效果
23D 转换
在 2D 转换基础上, 增加 z 轴的变化效果
3 转换属性
属性: transform
取值:
1none
默认值, 不进行任何转换
2 转换函数
表示一个或者多个转换函数, 如果是多个函数的话, 中间以空格分开
4 转换原点
属性: transform-origin
默认情况下, 原点是在整个元素的中心位置处
取值: 数值 / 百分比 / 关键字
两个值: 表示 x 轴 和 y 轴的位置
三个值: 表示 x 轴 ,y 轴 ,z 轴的位置
22D 转换
12D 位移
1 属性 和 函数
属性: transform
函数:
translate(x) : 元素在 x 轴上的位移距离, 取值为正, 向右移动, 取值为负, 向左移动
translate(x,y) :
x 表示 x 轴位移距离
y 表示 y 轴位移距离, 取值为正, 向下移动, 取值为负, 向上移动
translateX(x) : 只改变元素在 x 轴上的位置
translateY(y) : 只改变元素在 y 轴上的位置
取值:
1 数值
2 百分比
22D 缩放
1 作用
改变元素在页面中的大小
2 属性和函数
属性: transform
函数:
scale(value), 如果只给一个值, 那么 x 轴和 y 轴将等比缩放
scale(x,y): 改变 x 轴和 y 轴的缩放比例
scaleX(x): 只改变 x 轴的缩放比例
scaleY(y): 只改变 y 轴的缩放比例
取值:
默认值 为 1
缩小: 0~1 之间的数值
放大: 大于 1 的数值
32D 旋转
1 作用
改变元素在页面中的角度
2 属性 和 函数
属性: transform
函数: rotate(ndeg)
n 取值为正, 则顺时针旋转
n 取值为负, 则逆时针旋转
3 注意
1 转换时, 坐标轴会一起进行转换
2 转换原点可以影响转换效果
42D 倾斜
1 作用
改变元素在页面上的形状
2 属性 和 函数
属性: transform
函数:
skew(xdeg) : x 轴倾斜指定角度
实际上时改变 y 轴的倾斜角度
取值为正: 逆时针
取值为负: 顺时针
skewX(xdeg) : 效果同上
skewY(ydeg) : y 轴倾斜指定角度
实际上是改变 x 轴的倾斜角度
取值为正: 顺时针
取值为负: 逆时针
1 转换
1 属性
1 转换属性
transform: 转换函数
2transform-origin: 转换原点
数值 / 百分比 / 关键字
3transform-style
如何处理子元素位置
取值:
1flat : 默认值
2preserve-3d : 保留子元素 3d 位置
4perspective
人眼到投射元素的距离
22D 转换
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)
33D 转换
13D 旋转
- rotateX(xdeg)
- rotateY(ydeg)
- rotateZ(zdeg)
- rotate3D(x,y,z,ndeg)
23D 位移
- 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
- 5transition
- property duration timing-function dealy
3 动画
1 声明动画
@keyframes 动画名称 {
0%{
动画开始时的样式
- }
- ... ...
- 100%{
动画结束时的样式
- }
- }
@-moz-keyframes 动画名称 {
0%{
动画开始时的样式
- }
- ... ...
- 100%{
动画结束时的样式
- }
- }
@-webkit-keyframes 动画名称 {
0%{
动画开始时的样式
- }
- ... ...
- 100%{
动画结束时的样式
- }
- }
2 使用动画
将 声明好的动画绑定在指定的选择器上
属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
取值:
1 绝对值
- 2infinite
- 6animation-direction
取值:
- normal
- reverse
逆向播放
3alternate
轮流播放
- 7animation
- name duration timing-function delay iteration-count direction
- 8animation-fill-mode
- 1none
- 2forwards
动画播放后, 会保留在最后一帧上
3backwards
动画播放前 (延迟时间内), 会保留在第一帧上
4both
前后都应用
9animation-play-state
1paused : 暂停
2running : 播放
来源: http://www.bubuko.com/infodetail-2498786.html