CSS 表单属性 + 属性选择器 + 结构伪类选择器 + 伪元素选择器 + 过渡

HTML5+CSS3 提高

1·HTML5新增语义化标签

序号	标签	描述
1	header	头部标签，通常包含一组介绍性的或是辅助导航的实用元素
2	nav	导航标签，在当前文档或其他文档中提供导航链接
3	article	内容标签，表示文档、页面、应用或网站中的独立结构
4	section	定义文档的某个区域，没有更具体的语义
5	aside	侧边栏标签，表示一个和其余页面内容几乎无关的部分
6	footer 尾部标签，表示页脚

2·多媒体标签

视频标签 <video src="地址"> </video>
				width				   宽
				height				   高
				autoplay = "autoplay"  自动播放
				controls = "controls"  显示播放控件
				loop = "loop"		   循环播放
				preload = "auto" or "none" 是否预先加载，有autoplay就忽略
				poster = "地址"	   	   加载等待图片
				muted = "muted"	   	   静音播放

音频标签 <audio src="地址"> </audio>
				autoplay = "autoplay"  自动播放
				controls = "controls"  显示播放控件
				loop = "loop"		   循环播放

3·HTML5 新增的表单属性

<form action="">
	<ul>
    	<li>数量: <input type="number" /></li>
    	<li>手机号码: <input type="tel" /></li>
    	<li>搜索: <input type="search" /></li>
    	<li>邮箱: <input type="email" /></li>
    	<li>网址: <input type="url" /></li>
    	<li>日期: <input type="date" /></li>
    	<li>时间: <input type="time" /></li>
    	<li>月份: <input type="month" /></li>
    	<li>星期: <input type="week" /></li>
    	<li>颜色: <input type="color" /></li>
  	</ul>
	<div class="div">
		<input type="submit" value="提交" />
	</div>
</form>

属性	值	描述
required	required	表单拥有该属性表示内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在内容将不显示
autofocus	autofocus	自动聚焦属性
autocomplete	on / off	是否应该启用自动完成功能。默认已经打开，需要放在表单内，同时加上 name 属性，同时成功提交过
multiple	multiple	可以多选文件提交

修改 palceholder 的样式

input::placeholder {
  color: pink;
}

4·CSS3 新增属性选择器

选择符	描述
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 元素

• ^ 以 xxx 开头
• $ 以 xxx 结束
• *包含

注意：类选择器、属性选择器、伪类选择器，权重为 10

5·结构伪类选择器

E:first-child 匹配父元素中的第一个子元素 E
E:last-child   匹配父元素中的最后一个子元素 E
E:nth-child(n)匹配父元素中的一个或特定多个子元素 E
E:nth-last-child(n) 倒数，从最后一个开始

(n)	第几个
（n）	从n开始到最后一个
（2n）	偶数
（2n+1）	奇数
（5n）	5 ， 10 ， 15
（n+5）	从第5个开始到最后一个
（-n+5）	从第5个开始到最前面一个

E:first-of-type 匹配类型 E 的第一个
E:last-of-type   匹配类型 E 的最后一个
E:nth-of-type(n)匹配类型 E 的第 n 个

E:nth-child(n) 先把所有盒子排序，先看（n），再看E
E:nth-of-type(n)会把指定元素盒子排序，先看E，再看（n）

6·CSS3 新增伪元素选择器基本使用

div::before在元素内部的前面插入内容
div::after  在元素内部的后面插入内容

注意：

1. 伪元素和标签选择器的权重为1.
2. before和after创建一个元素，属于行内元素
3. 必须写content: ' ';属性
4. 伪元素在文档树中找不到

两种伪元素清除浮动的原理

• 单伪元素

.clearfix::after {
		content: ' ';		伪元素必写属性
		display: block;		插入元素必须是块级
		height: 0;			不要看见这个元素
		clear: both;		核心代码
		visibility: hidden;	不要看见这个元素
}

• 双伪元素

.clearfix::before,
.clearfix::after {
		content: ' ';
		display: table;
}
.clearfix::after {
		clear: both;
}

7·CSS3 盒子模型

box-sizing

1. box-sizing: content-box; 盒子大小为 width + padding + border （默认）
2. box-sizing: border-box; 盒子大小为 width

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

8·CSS3滤镜filter

可以对图片做模糊处理

filter: blur(5px);

• 数值越大越模糊；
• 数值为 0 最清晰（不做模糊处理）

CSS3 图片 filter 属性扩展

filter: grayscale(100%) 可以让整个网站灰度显示，清明节常用，一般给body加或者给html加

9·CSS3 calc 函数

width: calc(100% - 80px);可以让子盒子永远比父盒子的宽度小 80px
运算符之间要有空格

10·CSS3 新增属性过渡

transition: 属性 花费时间  (运动曲线 何时开始)可以不写;
			all		1s		 ease	   0s
			width
			height
			/* 谁做过渡，给谁加 */
			/*我们现在经常和 :hover 一起搭配使用*/

• 要过渡的属性：想要变化的 css 属性，可以是：宽度、高度、背景颜色、内外边距等，all 可以让所有能动画的属性一起过渡变化
• 动画时间：单位是秒（必须写单位），例如：0.5s
• 运动曲线：默认是 ease（可以省略）
• 何时开始：单位是秒（必须写单位），动画延迟触发时间，默认是 0s（可以省略）

曲线

• linear:         匀速
• ease:           以低速开始，然后加快，在结束前变慢
• ease-in:       以低速开始
• ease-out:     以低速结束
• ease-in-out: 以低速开始和结束
• steps():           时间函数中的间隔数量（步长）