CSS 3

css3新增选择器

一、字符串匹配属性选择器

元素名[属性="值"]，全匹配
元素名[属性^="值"]，表示以“值”开头的元素
元素名[属性$="值"]，表示以“值”结尾的元素
元素名[属性*="值"]，表示匹配包含I值I的元素
元素名[属性~="值"]，匹配用空格分隔后，有等于值的元素

二、目标伪类选择器

选中状态下的样式设置：
选择器[type="chekcbox"]:checked{}

禁用状态下的样式设置：
选择器[type="text"]:disabled{}

只读状态下的样式设置：
选择器[type="text"]:read-only{}

三、not伪选择器

#div:not(){} 
只要不是（可以跟任何条件）都会被选中

四、结构性伪类选择器

:nth-child系列

原理：必须以父类为选择基准，并且符合以下两个要求：
1. 必须是指定元素
2. 必须是该父元素下所指定的位置（会考虑Body内所有的元素）

first-child{}
last-child{}
only-child{}
:nth-child(值){}:/*值可以是数字，可以是odd:奇数，even:偶数   2n, 3n,4n:对应的倍数*/

示例：

父选择器  p:nth-child(2){}  
/* 第二个子元素 且元素为P */ 

父选择器  p:first-child{}  
/* 第一个子元素 且元素 为p */ 

父选择器  p:last-child{}  
/* 最一个子元素 且 元素为p */   

:nth-of-type系列

原理： 必须以父类为选择基准，该父元素指定位置的该元素排序，与其他元素无关

first-of-type{}
last-of-type{}
only-of-type{}
nth-of-type(数字|2n){}

示例：

父选择器  p:nth-of-type(2){}
/* 第二个标签为P 的子元素 */

父选择器  p:nth-last-of-type(2){}
/* 倒数第二标签为P 的子元素 */

父选择器  i:only-child{ }
/* 当父元素内，有且仅有唯一的指定元素的时候才有用 */ 

兄弟素选择器

#p3~span{}
/*指定元素之后的所有相同标签的弟弟元素被选中*/

#p3+span{} 
/*指定元素的相邻弟弟元素，且为span*/

子选择选择器

/*子选择器，只能一级级的找,不能跨代*/

#div1>p{}
/*指定元素的子元素为P的，不能跨代*/

after和 before
伪类和伪元素

css3新增属性

一、 transition过渡属性

transition:值;
值：属性 时间 效果 延迟时间
并不是所有属性都有过渡效果，display属性就没有过渡效果

二、transform变换属性

  移动：transform:translate();
  旋转：transform:rotate();
  缩放：transform:scale();
  扭曲：transform:skew();

三、动画（可以做更复杂的动效）

第一步：定义动画

定义动画的方式：

1、@keyframes{
	from{
	}
	to{
	}
}
2、@keyframes{
	0%{
	}
	20%{
	}
	…%{
	}
	100%{
	}
}

第二步：使用动画

animation:值；
值：
	<' animation-name '>：
	检索或设置对象所应用的动画名称
	<' animation-duration '>：
	检索或设置对象动画的持续时间
	<' animation-timing-function '>：
	检索或设置对象动画的过渡类型
	<' animation-delay '>：
	检索或设置对象动画延迟的时间
	<' animation-iteration-count '>：
	检索或设置对象动画的循环次数
	<' animation-direction '>：
	检索或设置对象动画在循环中是否反向运动
	<' animation-fill-mode '>：
	检索或设置对象动画时间之外的状态
	<' animation-play-state '>：
	检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

四、定义字体

定义：
@font-face{
	font-family:名称;
	url:(字体的路径);
	font-style:normal|italic;
}

使用：
标签名{
	font-famliy:定义的名称;
	font-style:normal|italic;
}

五、圆角

border-radius:大小;
border-radius:左上 右上 右下 左下;
注：当宽、高、圆角相等时，就是一个圆。

六、背景大小

background-size:值;
值：固值|百分比|cover（覆盖，等比缩放，不允许容器中有空白）|contain（背景图片完整显示在容器中，当容器比背景图片大时，会有空白）
注：和background-img结合使用。

七、阴影

box-shadow:值;
值：x轴的偏移 y轴的偏移 模糊值 外延值 颜色 inset（内阴影）
text-shadow:值;
值：x轴的偏移 y轴的偏移 模糊值 阴影颜色

八、渐变（作为值使用）

核心：本质是生成一张图片，应用在background-img。

线性渐变

liner-gradient()
1、渐变方向：top、right、left、bottom或角度deg、从left开始，逆时针旋转。
2、起始颜色、可添加起止位置。
3、终止颜色。

径向渐变

radial-gradient()
background-image:radial-gradient(ellipse at left top, #f00 10%, #ff0 20%, #080 70%);