关于HTML5+CSS3新增内容的总结

说到H5+C3会不会觉得东西好多啊，今天就整理了一份总结性的内容。

CSS3选择器有哪些？ 属性选择器、伪类选择器、伪元素选择器。

CSS3新特性有哪些？ 1.颜色：新增RGBA，HSLA模式 2. 文字阴影（text-shadow、） 3.边框： 圆角（border-radius）边框阴影： box-shadow 4. 盒子模型：box-sizing 5.背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局 6.渐变：linear-gradient、radial-gradient 7. 过渡：transition，可实现动画 8. 自定义动画 9. 在CSS3中唯一引入的伪元素是 ：：selection. 10. 媒体查询，多栏布局 11. border-image 12.2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y) 13. 3D转换

CSS3新增伪类有那些？ :first-child选择某个元素的第一个子元素； :last-child选择某个元素的最后一个子元素； :nth-child(n)选择某个元素的一个或多个特定的子元素； 例：p:nth-child(3): 第三个必须是p元素 否则无效

:nth-child(length);/*参数是具体数字*/  :nth-child(n);/*参数是n,n从0开始计算*/   :nth-child(n*length)/*n的倍数选择，n从0开始算*/  :nth-child(n+length);/*选择大于length后面的元素*/  :nth-child(-n+length)/*选择小于length前面的元素*/  :nth-child(n*length+1);/*表示隔几选一*/  //上面length为整数  :nth-child(n) //就是所有选择的元素  “n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； :nth-of-type()选择指定的元素； 例如：p:nth-of-child(3) 选择第三个p元素

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算； :first-of-type选择一个上级元素下的第一个同类子元素； :last-of-type选择一个上级元素的最后一个同类子元素 :only-child选择的元素是它的父元素的唯一一个了元素； :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素 :empty选择的元素里面没有任何内容 :not()不匹配该选择器的元素 也就是除了某元素后的其他所有元素 :enabled、:disabled 控制表单控件的禁用状态。 :checked，单选框或复选框被选中。 ::first-line选择元素的第一行 ::first-letter选择文本块的第一个字母 ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，写过最多的就是清除浮动 ::selection用来改变浏览网页选中文的默认效果

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性： 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签（header,nav,footer,aside,article,section） 3. 音频、视频API(audio,video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； 7. sessionStorage 的数据在浏览器关闭后自动删除 8. 表单控件，calendar、date、time、email、url、search 9. 新的技术webworker, websocket, Geolocation

支持HTML5新标签： * IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式： * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

以上就是关于HTML5+CSS3新增内容的总结的详细内容，更多内容请关注技术你好其它相关文章！