css高级
1、复杂选择器
1、作用
匹配 页面的元素 ... ...
2、选择器分类
1、兄弟选择器
1、作用
通过 元素的位置关系匹配元素
位置关系：兄弟关系(平级元素)
<div>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
</div>
2、相邻兄弟选择器
1、作用
匹配指定元素的相邻兄弟元素
被匹配的元素要 紧紧的跟在 前一个元素的后面
2、语法
选择器1+选择器2
#p1+p{}
3、通用兄弟选择器
1、作用
匹配某元素后面所有的兄弟元素
2、语法
选择器1~选择器2{}
2、属性选择器
1、作用
使用元素所附带的 属性及其值，来匹配页面的元素
ex ：获取页面中所有 type 值为 text 的元素
2、语法
语法：[]
1、[属性名]
作用：匹配页面中 所有 附带 指定属性的元素
[class] : 匹配页面中所有附带 class 属性的元素
[type] :
2、元素[属性名]
作用：页面中所有 附带 指定 属性的 指定元素
ex:
p[id]:匹配 所有 附带 id 属性的p元素
input[type]:匹配 所有 附带 type 属性的 input元素
input[type][class]:匹配 所有附带 type属性 和 class 属性的 input元素
3、元素[属性名=值]
作用：匹配 所有 属性名 = 指定值得 元素
ex:
1、获取页面上所有的文本框(type=text)
[type=text]{}
input[type=text]{}
4、元素[class~=值]
<div class="c1 c2 c3 c4"></div>
作用：匹配 附带 class属性的 元素，其中class属性的值是以 空格 隔开的值列表。"值" 是列表中的一个独立单词
div[class~=c2]
5、元素[属性^=值]
作用：匹配 属性值 以 值作为开始的元素
ex:
div[class^=c] : 匹配页面中 class属性值以c作为开始的div元素
获取页面中，所有 name 属性值 以 txt 作为开始的 input元素
input[name^=txt]
6、元素[属性*=value]
作用：匹配页面中 属性值中 包含value字符的元素
ex:
div[class*="ort"]
<div class="important"></div>
7、元素[属性$=value]
作用：匹配页面中 属性值 以value字符作为结尾的元素
3、目标伪类
1、作用
突出显示活动html 锚点 元素
2、语法
:target
4、元素状态伪类
1、匹配 启用、禁用、被选中状态
2、语法
:enabled : 匹配每个已启用元素(表单元素中)
:disabled : 匹配每个已禁用元素(表单元素中)
:checked : 匹配每个被选中的元素(checkbox,raido)
5、结构伪类(重点)
1、通过结构关系进行元素匹配
2、语法
1、:first-child
匹配 属于其父元素中的首个子元素
td:first-child{background:red;}
2、:last-child
匹配 属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配 属于其父元素中的第n个子元素
:nth-child(1) --> :first-child
4、:empty
匹配 没有子元素(文本)的元素
<div>
<p>xxx</p>
</div>
非 empty
<div>xxxx</div>
非 empty
<div>
</div>
非 empty
<div></div>
empty
div:empty
5、:only-child
匹配 属于去 父元素中的 唯一子元素
6、否定伪类
语法：
:not(选择器)
作用：将 指定选择器匹配的元素 排除在外
7、伪元素选择器
1、伪元素 与 伪类的区别
1、伪类 ：匹配 元素
2、伪元素 ：匹配元素中的文本内容
2、分类
1、:first-letter 或 ::first-letter
作用：用于匹配 元素中的首字符
2、:first-line 或 ::first-line
作用：用于匹配元素中的 首行
3、::selection
作用：匹配用户选取的部分
3、: 与 ::之间的区别
W3C规范
: 表示的 是伪类选择器
:: 表示的是 真正的 伪元素选择器
在 CSS2.1的时候，伪类 和 伪元素 都是用 : 来进行表示
现阶段，推荐使用 : 即表示伪类，页表示伪元素
2、内容生成
1、作用
允许使用CSS的方式，在匹配元素内容区域之前或之后 插入新的数据
<div>普通的div</div>
2、选择器(伪元素)
1、:before
匹配 元素 内容区域之前
2、:after
匹配 元素 内容区域之后
3、属性
属性：content
作用：配合 :before 和 :after 一起插入生成的内容
取值：
1、图像 ：url()
2、字符串：纯文本
3、计数器
4、计数器
1、作用
通过 CSS 生成 一组有序的数字，通过 内容生成的方式，插入到元素中
2、属性 和 函数
1、counter-reset
counter：计数器
reset：重置，复位
1、作用
定义 或 复位 一个计数器，并设置其初始值
2、语法
counter-reset:名称 值;
注意：
1、默认值 可以省略，省略则为 0
2、声明位置：不要放在使用计数器的元素中声明
3、声明多个计数器
counter-reset:名称 值 名称 值;
2、counter-increment
1、作用
设置某个选择器每次每次出现的计数器 增量
2、语法
counter-increment:名称 增量值;
注意：
1、增量值可省，默认值为1
2、增量之可以为正(递增),也可以为负(递减)
3、什么地方声明：哪个元素使用，放在哪个元素中声明
4 、设置 多计数器 增量
counter-increment:名 增量 名 增量;
3、函数:counter()
语法：content:counter(计数器名)
3、练习
完成以下内容展示(通过计数器)
1、html
1.1 块级元素
1.2 行内元素
1.3 图片元素
2、CSS
2.1 行内样式
2.2 内部样式表
2.3 外部样式表
3、多列
1、分隔列
属性：column-count
取值：数字
2、列间隔
属性：column-gap
取值：px为单位的数字
3、列规则
作用：每两个列之间的边框的大小 样式 颜色
属性：column-rule
取值：width style color;
4、兼容性
IE10+ , Opera 支持 多列
Firefox ：-moz-
Chrome、Safari ：-webkit-
4、CSS Hack
1、IE 标准模式和 混杂模式
运行模式：
1、标准模式
2、混杂模式
3、准标准模式
不同模式
1、CSS 框模型 有影响
2、JS解析 有影响
依靠 <!doctype>进行模式选择
2、CSS Hack
浏览器的类型以及版本 不同 会造成 CSS效果 显示不同
1、不同厂商的浏览器
IE ，Firefox ，Chrome，Safari，Opera
2、同一厂商浏览器的不同版本
IE6 IE7 IE8 ... ...
3、CSSHack 工作原理
1、通过 选择器器 或 样式的优先级 来解决兼容性问题
2、实现方式
1、CSS 类内部Hack
通过 前后缀的 方式解决兼容性
2、选择器Hack
在选择器前加前缀 解决兼容性问题
3、HTML头部引用Hack
通过 条件注释 来解决兼容性问题
根据 条件注释 来判断浏览器的类型和版本，再决定执行哪些代码
语法：
<!--[if 关键字 IE 版本]>
满足条件的话可以被正常执行
否则，就被注释掉
<![endif]-->
1、关键字
1、省略
判断是否为 IE 或 是否为IE的指定版本
ex
<!--[if IE]>
该段内容只有在 IE浏览器中被运行
<![endif]-->
<!--[if IE 6]>
该段内容只有在 IE6 浏览器中被运行
<![endif]-->
2、gt
greater than
选择条件版本以上版本浏览器，不包含条件版本
<!--[if gt IE 6]>
在 IE6(不包含) 以上版本的浏览器中显示
<![endif]-->
3、gte
greater than or equal
大于等于
包含指定版本浏览器
4、lt
小于指定版本(不包含)
5、lte
小于等于指定版本(包含)
6、!
选择条件版本以外的所有版本
1、转换
1、转换的简介
1、什么是转换
改变元素在网页中的 形状，尺寸，位置和角度的一种方式
元素能够实现2D转换或3D转换
2D:使元素在 x轴 和 y轴发生变化
3D:2D基础上，增加在Z轴的变化
2、转换属性
1、属性
transform
取值：
1、none
默认值，无转换效果
2、transform-function
一个或多个 转换函数，中间用 空格 分开
2、转换的原点
1、属性
transform-orgin
默认情况下：转换原点在元素中的中心点
2、取值
1、value1 value2
value1 ：在x轴上的位置
value2 ：在y轴上的位置
2、value1 value2 value3
value1 ：在x轴上的位置
value2 ：在y轴上的位置
value3 : 在z轴上的位置
3、取值单位
1、数值
以元素的左上角 为 0px 0px 开始计算
0px 0px
2、百分比
以元素的左上角 为 0% 0% 开始
0% 0% ：左上角
50% 50% : 元素中间
3、关键字
top,right,bottom,left
ex:
div{
transform-origin:center center; /**原点在元素中心*/
transform-orgin:0% 100%;/*原点在元素左下角*/
}
2、2D转换
1、2D位移
1、作用
改变元素在页面中的 位置
2、属性 和 函数(值)
属性：transform
函数：
translate(x)
translate(x,y)
translateX(x)
translateY(y)
取值：
1、数值
2、百分比
3、负数
2、2D缩放
1、作用
改变元素的 大小
根据缩放比例 改变元素大小
2、属性 和 函数
属性：transform
函数：
scale(value)
scale(x,y)
scaleX(x)
scaleY(y)
注意：一个参数时，第二个参数与第一个参数默认相等
x : x轴上的缩放比例
y : y轴上的缩放比例
取值：
默认值 为 1
缩小：0-1之间的小数
放大：大于1的数值
3、2D旋转
1、作用
改变元素显示的角度
2、属性 和 函数
属性：transform
函数：rotate(ndeg)
deg : 单位 ， 不能省略
n : 旋转的角度
+ ：顺时针旋转
- ：逆时针旋转
3、注意
元素旋转后，连同坐标轴也跟着旋转
4、转换原点
transform-origin:value1 value2;
4、2D倾斜
1、作用
让元素向x轴或y轴产生一定倾斜角度(倒)
2、属性 和 函数
属性：transform
函数：
skew(xdeg)
skew(xdeg,ydeg)
skewX(xdeg)
skewY(ydeg)
3、注意
1、skewX(x)
元素向x轴的方向产生倾斜，实际上是改变y轴的倾斜角度(逆时针)
2、skewY(y)
元素向y轴的方向产生清下，实际上是改变x轴的倾斜角度(顺时针)
3、3D转换
1、3D
空间距离 --> 空间轴 --> z轴
2、空间距离
1、属性
perspective
-webkit-perspective : 500px;
2、作用
定义 人眼 到 3D投射平面的距离
3、定义位置
该属性要定义在 实现3D转换元素的父元素上
3、3D转换效果
1、旋转
1、属性和函数
属性：transform
函数：
1、rotateX(xdeg);
2、rotateY(ydeg);
3、rotateZ(zdeg);
4、rotate3D(x,y,z,ndeg);
x,y,z 的取值 如果 为0 ， 则该轴不参与旋转
rotate3d(0,0,1,45deg)-->rotatez(45deg)
transform:rotate3D(1,1,1,45deg)
与
transform:rotatex(45deg) rotatey(45deg) rotatez(45deg);
2、位移
1、属性 和 函数
属性：transform
函数：
translatex()
translatey()
translate(x)
translate(x,y)
translatez(z);
translate3d(x,y,z);
3、属性：transform-style
取值：
1、flat
默认值，以2D元素位置摆放子元素
当前元素还是2D元素
2、preserve-3d
将当前元素变成3D元素
2、过渡
1、什么是过渡
过渡(transition),使CSS属性值，在一段时间内平滑过渡，能够观察到变化的过程和最后的结果。
2、过渡要素 & 属性
1、过渡属性
属性：transiton-property
取值：
1、none
2、all
3、property(具体的属性名称)
ex :
transition-property:background;
transition-property:width;
可以设置过渡的属性:
1、颜色属性
2、取值为数值的属性
3、转换属性
transform
4、渐变属性
5、visibility属性
6、阴影
2、过渡时长
1、作用
指定 整个过渡 所需要的时间
2、属性
transition-duration
取值：
以 s | ms 作为单位的数值
1s = 1000ms
0.3s = 300ms
3、注意
该属性 在过渡中 必须设置，否则默认为 0 ，不会产生过渡效果
3、过渡速度时间曲线函数
1、属性
transition-timing-function
取值：
1、ease：默认值，慢速开始，快速变快，慢速结束
2、linear：匀速
3、ease-in ：慢速开始，加速效果
4、ease-out: 快速开始，减速效果
5、ease-in-out:慢速开始和结束，先加再减
4、过渡延迟
1、作用
当用户激发过渡效果后，等待多长时间后开始 显示效果
2、属性
transition-delay
取值： 以 s | ms 作为单位的数值
默认值 ：0s
3、触发过渡
用户特殊行为 进行 触发
如：
:hover
:active
:focus
或 JS
4、简写属性
transition:property duration timing-function delay,property duration ... ...;
3、动画
1、什么是动画
动画(animation)，使元素从一种样式逐渐变化为另外一种样式的过程
2、完成动画所需要的步骤
1、声明动画
在特点的时间点上设置动画的样式
时间点：是个模糊时间，而不是具体时间
样式：元素的 样式
2、为元素调用动画
通过 animation 属性 调用动画
并且指定动画的播放时长、次数等
3、声明动画
1、作用
通过 @keyframes 关键字 声明动画的"关键帧"
关键帧：某个时间点上的特殊效果
2、语法
@keyframes 动画名{
0% | from{
/*动画开始时的样式效果*/
width:100px;
height:100px;
background:red;
}
...
50%{
background:green;
}
...
100% | to{
/*动画结束时的样式效果*/
width:100px;
height:100px;
border-radius:50%;
background:blue;
}
}
兼容性：
@-webkit-keyframes 名{}
@-moz-keyframes 名{}
4、调用动画(兼容性)
1、animation-name
指定调用动画的名称
2、animation-duration
完成一个动画周期的时间
必须设置属性
s | ms 作单位
3、animation-timing-function
完成动画时的速度时间曲线函数
4、animation-delay
动画播放之前的延迟
5、animation-iteration-count
动画播放次数
取值：
1、数值
2、infinite ：无限次播放
6、aniamtion-direction
动画播放方向
取值：
1、normal,默认值，正向播放(0%~100%)
2、reverse,逆向播放(100%~0%)
3、alternate,奇数播放次数是正向播放，偶数播放次数时，逆向播放
7、简写方式 - animation
animation:name duration timing-function delay interation-count direction;
8、animation-fill-mode
规定动画在播放之前或之后，动画效果是否可见。
取值：
1、none
不改变默认行为
2、forwards ：动画播放完成后，保持在最后一个 帧 的状态上
3、backwards ：动画播放之前(延迟时间内)，保持在第一个 帧 的状态上
4、both：动画播放前后都采用填充模式
9、animation-play-state
规定动画的播放状态(运行或暂停)
取值：
1、paused : 暂停
2、running : 播放
4、CSS优化
