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优化