HTML5-第三天上课笔记.docxVIP

一：CSS3简介：

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷动画圆角阴影边框图片…

Css当js用

Js当后台语言用

二：CSS3现状：

浏览器支持程度差，需要添加私有前缀(移动端)

requestFullScreen

webkitRequestFullScreen

mozRequestFullScreen

msRequestFullScreen

oRequestFullScreen

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

三：选择器：

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容

属性选择器：

E[attribute]表示存在attr属性即可；

div[class]

E[attr=val]表示属性值完全等于val；

div[class=mydemo]

E[attr*=val]表示的属性值里包含val字符并且在“任意”位置；

div[class*=mydemo]

E[attr^=val]表示的属性值里包含val字符并且在“开始”位置；

div[class^=mydemo]

E[attr$=val]表示的属性值里包含val字符并且在“结束”位置；

div[class$=demos]

伪类选择器-伪元素选择器：

之前学习的：a:hovera:linka:activea:visited

以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类

E:first-child:查找E这个元素的父元素的第一个子元素E

E:last-child:最后一个子元素

E:nth-child(n):第n个子元素，计算方法是E元素的全部兄弟元素

E:nth-last-child(n):同E:nth-child(n)相似，只是倒着计算

E:nth-child(even):所有的偶数

E:nth-child(odd):所有的奇数

E:nth-of-type(n):指定类型

E:empty选中没有任何子节点的E元素，注意，空格也算子元素

E:target结合锚点进行使用，处于当前锚点的元素会被选中

重点说明：n遵循线性变化，其取值0、1、2、3、4、...但是当n=0时，选取无效

案例代码：

/*第一个li元素*/

li:first-child{

color:red;

}

/*最后一个元素*/

li:last-child{

color:green;

}

/*获取第10个元素*/

li:nth-child(10){

color:orange;

}

/*获取倒数第3个li元素*/

li:nth-last-child(3){

color:purple;

}

/*获取索引顺序为6的倍数的li元素*/

li:nth-child(6n){

text-decoration:underline;

border:1pxsolidred;

}

/*获取所有索引为偶数的li元素*/

li:nth-child(even){

border:1pxsolidblack;

}

/*获取前5个li元素*/

li:nth-child(-n+5){

background-color:#ddd;

}

n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等

伪元素选择器：

重点：E::before、E::after

是一个行内元素，需要转换成块:display:blockfloat:**position:

必须添加content,哪怕不设置内容，也需要content:””

E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理

E::before:定义在一个元素的内容之前插入content属性定义的内容与样式

E::after:定义在一个元素的内容之后插入content属性定义的内容与样式

注意：

IE6、IE7与IE8（怪异模式Quirksmode）不支持此伪元素

CSS2中E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中提出伪元素的概念E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者E:after伪类

E