"这篇资源主要探讨了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的支持不断加强,这些新的技术和特性已经广泛应用于现代网页开发中,提升了用户体验并推动了前端开发的创新。