2.8css3 新特性；结构伪类、伪元素选择器 过渡

HTML5新特性

1. HTML5新增的语义化标签：

  <header>：头部标签

  <nav> ：导航栏标签

<article>： 内容标签

<section>：定义文档某个区域

<aside>： 侧边栏标签

<footer>：尾部标签

注意：

1. 语义化标签主要是针对搜索引擎的
2. 新标签在页面中可以使用多次
3. 在IE9中，需要把这些元素转换为块级元素
4. 移动端更喜欢使用这些标签

1. HTML5新增多媒体标签：

  2.1音频：<audio>

当前<audio>元素支持三种音频格式，尽量使用mp3格式

<audio src=”文件地址” controls=”controls”></audio>

<audio>常见属性：

  2.2视频：<video>

当前<video>元素支持三种视频格式：尽量使用mp4格式

<video src=”文件地址” controls=”controls”></video>

<video>常见属性：

   多媒体标签总结：

1. <audio>和<video>的使用方式基本一致
2. 谷歌浏览器把音频和视频都自动播放禁止了；我们可以给视频标签加muted属性来静音播放视频，而音频只能通过Javascript解决
3. 视频标签是重点，我们经常设置自动播放、循环和大小属性，不用controls控件

1. HTML5新增 input 类型：

重点记住：number、tel、search

1. HTML5新增的表单属性：

可以通过以下设置方式修改placeholder里面的字体颜色：（搜索框里底下提示的文字）

 input::placeholder {

                   color: pink;

                  }

CSS新特性

• css3新增选择器

1. 属性选择器

   属性选择器可根据元素特定属性来选择元素（无需借助于类或id选择器）

注意：类选择器、属性选择器、伪类选择器权重都是10

1. 结构伪类选择器（重点）

  结构伪类选择器主要根据文档结构来选择元素，常用于根据父元素选择器里面的子元素

例：ul li: nth-child(5) { } 选择某个父元素的一个或多个特定的子元素

n可以是数字、关键字、公式：

1. n是数字：就是选择n个子元素，里面数字从1开始
2. n是关键字：even偶数；odd奇数
3. n是公式：若n是公式，则从0开始计算（但第0个元素和超出元素的个数会被忽略）

nth-child(n)：从0开始每次加1往后计算，必须是n，不能是其他字母，选择了所有孩子

nth-child和nth-of-type的区别：

1. nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，再根据E找第n个孩子

小结：

1. 如果是无序列表，肯定用nth-child更多（无序列表里只有<li>）

（2）结构伪类选择器属于伪类选择器，权重也是10

3、伪元素选择器（重点）

  伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

  element::before { }   element（元素）

注意：

1. before和after创建一个元素，但是属于行内元素
2. 新创建的这个元素在文档树（body）中是找不到的，所以称之为伪元素
3. before和after必须有content属性  content: ‘ ‘;（没有内容也要写）
4. before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
5. 伪元素选择器和标签选择器一样，权重为1

伪元素选择器使用场景1：伪元素字体图标

 p::before {

         position: absolute;

right: 20px;

top: 10px;

content: 'e91e';

font-size: 20px;

}

伪元素选择器使用场景2：仿土豆网（鼠标经过有遮罩效果）

.tudou:hover::before {

/* 而是显示元素 */

display: block;

}

伪元素选择器使用场景3：伪元素清除浮动本质

（1）额外标签法也称为隔墙法，是 W3C 推荐的做法。

（2）父级添加 overflow 属性

（3）父级添加after伪元素

（4）父级添加双伪元素

• css3盒子模型

CSS3 中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

（1）box-sizing: content-box；盒子大小为width + padding + border（以前默认的）

（2）box-sizing: border-box；盒子大小为width

如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

• css3其他特性（了解）

1. 图片变模糊

   CSS3滤镜filter：

   filter css属性将模糊或颜色偏移等图形效果应用于元素

   filter: 函数();  例如: filter: blur(5px);    blur模糊处理，数值越大越模糊

2、计算盒子宽度width: calc 函数

   CSS3  calc函数：

   calc() 此css函数让你在声明css属性值时执行一些计算

    例子： width: calc(100%-30px);  （子盒子永远比父盒子小30px）

     括号里面可以使用+ - * /（加、减、乘、除）

CSS3过渡（重点）

  过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用flash动画或

JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

  过渡动画： 是从一个状态渐渐的过渡到另外一个状态

  可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持，但不会影响页面布局

  我们现在经常和 :hover 一起搭配使用

transition: 要过渡的属性 花费时间 运动曲线 何时开始；

1. 属性：想要变化的css属性，宽度高度、背景颜色、内外边距都可以。若想要所有的属性都变化过渡，写一个all就可以。
2. 花费时间：单位是秒（必须写单位）比如 0.5s
3. 运动曲线：默认是ease（不改动可以省略不写）
4. 何时开始：单位是秒（必须写单位），可以设置延迟触发，默认是0s（不改动可以省略不写）

过渡口诀：谁做过渡给谁加

课程总结：

1. HTML学的就是常用标签，就是基本盒子
2. CSS就是用来美化布局网页的
3. HTML+CSS无逻辑可言，基本就是搭积木摆放盒子的过程，你需要的是耐心
4. 现在最困难的是布局结构，欠缺分析页面布局的能力
5. 同一个模块有很多布局方式，能做出来就是好的
6. 多看别人写的页面，模仿人家的布局，每次写页面总会有收获
7. 一定要学会利用chrome调试工具，能快速帮我们排查错误
8. 学好定位，对后面学习Javascript有很大帮助

最后

以上就是震动星星为你收集整理的2.8css3 新特性；结构伪类、伪元素选择器 过渡的全部内容，希望文章能够帮你解决2.8css3 新特性；结构伪类、伪元素选择器 过渡所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。