HTML5与CSS3选择器深入解析

"这篇内容主要探讨了HTML5和CSS3中的选择器，以及HTML5的发展历程和关键特性。作者鲁超伍，网名Adam，是一位有多年前端开发经验的专业工程师，目前在淘宝网北京UED任职。他强调了网站标准从XHTML1、CSS2.1到HTML5和CSS3的演变，并指出HTML5与CSS3如何更好地分离内容和表现。" 在CSS3选择器部分，提到了以下几种类型： 1. **属性选择器**：例如`a[href$='.pdf']`选取所有href属性以'.pdf'结尾的`<a>`标签，`a[href^='mailto']`选取href属性以'mailto'开头的`<a>`标签，而`a[class*=‘item’]`则选取class属性包含'item'的`<a>`标签。 2. **兄弟选择器**：`Div~img`表示选取所有紧跟在`<div>`元素后面的`<img>`元素，但不包括同级的其他元素。 3. **伪类选择器**：`:nth-child(n)`选取父元素的第n个子元素；`:nth-last-child(n)`选取父元素的倒数第n个子元素；`:last-child`选取父元素的最后一个子元素；`:checked`选取被选中的表单元素，如已勾选的复选框或单选按钮；`:empty`选取没有子节点（包括文本节点）的元素；`:only-child`选取其父元素下唯一的孩子元素；`:nth-of-type(odd)`和`:nth-of-type(even)`分别选取奇数位置和偶数位置的同类型元素。 HTML5的发展历程涵盖了从2007年至今的关键阶段，其中重要的里程碑包括： - **XHTML1**和**CSS2.1**，这两个标准定义了2001年至2006年间网站内容与呈现方式的基础。 - **Web Hypertext Application Technology Working Group (WHATWG)** 和 **World Wide Web Consortium (W3C)** 的合作推动了HTML5标准的形成，旨在改进内容和呈现的分离，增强网页功能和可用性。 - **HTML5** 从2007年开始，引入了许多新元素、API和特性，如`<video>`和`<audio>`标签、离线数据存储API、画布（Canvas）和视频支持等。 支持HTML5的浏览器，如Opera、Safari、Firefox和Internet Explorer 8.0+，逐渐添加了对HTML5特性的支持，如跨文档消息传递、服务器发送事件、Web Forms 2.0、地理定位、Web Workers、可编辑内容等。 HTML5的关键技术概览包括： - **新增和移除的元素**：HTML5引入了新的语义化元素，如`<header>`、`<footer>`、`<article>`、`<section>`等，同时移除了某些过时或不常用的元素。 - **HTML5基本布局**：通过流式布局、响应式设计等方法，HTML5提供了更灵活的页面构建方式。 - **对表单的支持**：HTML5加强了表单元素，如新增了`<input type="date">`、`<input type="range">`等类型，以及离线存储、验证功能等。 通过这些内容，我们可以深入理解HTML5和CSS3如何改进了网页开发，以及如何利用它们来创建更具交互性和响应性的现代网页。