html5新特性有哪些,css3新增属性有哪些（CSS3 的新特性）

1. CSS3 新增选择器

CSS3 给我们新增了选择器             ，可以更加便捷  
 
  
 
  
 
  
 
  
 
  
 
  
，更加自由的选择目标元素             。

1.1 属性选择器

属性选择品可以根据元素特定属性的来选择元素  
 
  
 
  
 
  
 
  
 
  
 
  
。这样就可以不用借助于类或者id选择器












。

选择符

简介

E[att]

选择具有 att 属性的E 元素
  
  
  
  
  
  
 。

E[att="val"]

选择具有 att 属性且厲性值等于 val 的E 元素  
  
  
  
  
  
 。

E[att^="val"]

匹配具有 att 属性旦值以 val 开头的E 元素
 


 


 


 


 


 


 
。

E[att$="val"]

匹配具有 att 属性且位以 val 结尾的E 元素
 
 
 
 
 
 
。

E[att*="val"]

匹配具有 att 属性且值中含有val 的E元素   
   
   
   
   
   
  。

注意：类选择器             、厲性选择器  
 
  
 
  
 
  
 
  
 
  
 
  
、伪类选择器












，权重为 10
 

 

 

 

 

 

 
。

1.2 结构伪类选择器

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

 

 

 

 

 

 
。

选择符

简介

E:first-child

匹配父元素中的第一个子元素E              。

E:last-child

匹配父元素中最后一个E元素
 
 

 
 

 
 

 
 

 
 

 
 

 
。

E:nth-child(n)

匹配父元素中的第n个子元素E












。

E:first-of-type

指定类型E的第一个                    。

E:last-of-type

指定类型E的最后一个 
 
 
 
 
 
 
 
 
 
 
 
 
。

E:nth-of-type(n)

指定类型E的第n个



















。

nth-child （n）选择某个父元素的一个或多个特定的子元素             。

n可以是数字  
  
  
  
  
  
 ，关键字和公式  
 
  
 
  
 
  
 
  
 
  
 
  
。

n如果是数字 
 


 


 


 


 


 


 
，就是选择第n 个子元素 
 
 
 
 
 
 
，里面数字从1开始…












。

n可以是关键字：even偶数   
   
   
   
   
   
  ，odd 奇数
  
  
  
  
  
  
 。

n可以是公式：常见的公式如下（如果n是公式
 

 

 

 

 

 

 
，则从0开始计算

 

 

 

 

 

 
，但是第0个元素或者超出了元素的个数会被忽略）  
  
  
  
  
  
 。

公式

取值

2n

偶数
 


 


 


 


 


 


 
。

2n+1

奇数
 
 
 
 
 
 
。

5n

5 10 15...   
   
   
   
   
   
  。

n+5

从第5个开始（包含第五个）到最后
 

 

 

 

 

 

 
。

-n+5

前5个（包含第5个）

 

 

 

 

 

 
。

区别：

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

2. nth-of-type 对父元素里面指定子元素进行排序选择
 
 

 
 

 
 

 
 

 
 

 
 

 
。先去匹配E
 
 

 
 

 
 

 
 

 
 

 
 

 
，然后再根据E找第n个孩子












。

1.3 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素












，而不需要HTML标签                    ，从而简化HTML结构                    。

选择符

简介

::before

在元素内部的前面插入内容 
 
 
 
 
 
 
 
 
 
 
 
 
。

::after

在元素内部的后面插入内容



















。

注意：

（1） before 和after 创建一个元素 
 
 
 
 
 
 
 
 
 
 
 
 
，但是属于行内元素             。

（2） 新创建的这个元素在文档树中是找不到的



















，所以我们称为伪元素

 
 
  
 
  
 
  
 
  
 
  
 
  
。

语法： element::before {}

before 和after必须有 content 属性












。

before 在父元素内容的前面创建元素             ，after 在父元素内容的后面插入元素
  
  
  
  
  
  
 。

伪元泰选择器和标签选择器一样  
 
  
 
  
 
  
 
  
 
  
 
  
，权重为 1  
  
  
  
  
  
 。

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

升级

优化

.clearfix:after {

content: " ";伪元素必须写的属性

display: block;插入的元素必须是块级

height: 0;不要看见这个元表

clear: both;核心代码清除浮动

visibility: hidden;不要看见这个元素

}

.clearfix:before, .clearfix:after {

content: " ";

display: table;转换为块级元素并且一行显示

}

.clearfix:after {

clear: both;

}

2. 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宽度）
 

 

 

 

 

 

 
。

2.1 CSS3滤镜filter

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

 

 

 

 

 

 
。

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

2.2 CSS3calc 函数

calc（此CSS函数让你在声明CSS属性值时执行一些计算）
 
 

 
 

 
 

 
 

 
 

 
 

 
。

width: calc(100% - 80px); （运算符号前面必须有空格
 


 


 


 


 


 


 
，并注意包含单位）














。

括号里面可以使用 ＋-*/ 来进行计算                    。

2.3 CSS3 过渡

过渡 (transition)是CSS3中具有颠覆性的特征之一
 
 
 
 
 
 
，我们可以在不使用 Flash 动画或javaScript 的情况下    
   
   
   
   
   
  ，当元素从一种样式变换为另一种样式时为元素添加效果 
 
 
 
 
 
 
 
 
 
 
 
 
。

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



















。

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

1.属性：想要变化的 css 属性
 

 

 

 

 

 

 
，完度高度 背景颜色 内外边距都可以             。如果想要所有的属性都

变化过渡

 

 

 

 

 

 
，写一个all 就可以  
 
  
 
  
 
  
 
  
 
  
 
  
。

2. 花费时间 ：单位是 秒（必须写单位）比如0.5s












。

3.运动曲线：默认是ease（可以省路）
  
  
  
  
  
  
 。

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）  
  
  
  
  
  
 。

口诀：谁做过渡给谁加
 


 


 


 


 


 


 
。