HTML5与CSS3选择器深入解析

"这篇资源主要探讨了HTML5和CSS3中的选择器，以及它们如何改变了网页设计和开发的格局。作者鲁超伍，别名Adam，是一位有多年前端开发经验的专业人士，曾在淘宝网北京UED任职。他分享了网站标准的发展历程，从XHTML1到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`：匹配被选中的表单元素，如`<input type="checkbox">`或`<input type="radio">`。 - `:empty`：选择没有子元素（包括文本节点）的元素。 - `:only-child`：选择其父元素中唯一的子元素。 - `:nth-of-type(odd)`：选择其父元素中奇数位置的元素。 - `:nth-of-type(even)`：选择其父元素中偶数位置的元素。 HTML5的引入带来了许多新的元素和特性，例如： - **新元素**：`<article>`, `<aside>`, `<header>`, `<footer>`, `<nav>`, `<section>`等，这些元素帮助结构化文档内容，提高了语义化程度。 - **HTML5基本布局**：通过流式布局、响应式设计等技术，使网页能够适应不同设备的屏幕尺寸。 - **表单增强**：`<input>`类型的扩展（如`date`, `email`, `range`, `search`等），`<fieldset>`, `<legend>`，以及新的表单验证属性，如`required`和`pattern`，提供了更好的用户输入体验。 - **离线存储**：`localStorage`和`sessionStorage`允许应用程序在离线状态下存储数据。 - **多媒体支持**：`<video>`和`<audio>`元素直接内联播放多媒体文件，无需依赖Flash或其他插件。 - **地理定位** (`Geolocation API`)：允许获取用户的位置信息。 - **Web Workers**：在后台运行脚本，提高复杂任务的处理能力，不影响用户界面的响应性。 随着各大浏览器对HTML5的支持不断加强，这些新的技术和特性已经广泛应用于现代网页开发中，提升了用户体验并推动了前端开发的创新。