HTML5与CSS3选择器详解：属性选择器、兄弟选择器与伪类选择器

"这篇资源是关于HTML5和CSS3的讲座内容，主要讲解了CSS3中的选择器，包括属性选择器、兄弟选择器和伪类选择器，同时也概述了HTML5的发展历史、重要特性和浏览器支持情况。" 在CSS3中，选择器的扩展大大增强了样式表的灵活性和准确性。属性选择器允许我们根据元素的属性来选择元素，例如`a[href$='.pdf']`会选择所有href属性以'.pdf'结尾的`<a>`标签。`a[href^='mailto']`则会选择href属性以'mailto:'开头的链接，而`a[class*=‘item’]`会匹配所有class属性包含'item'字符串的`<a>`元素。 兄弟选择器`Div~img`是一个非常有用的选择器，它用于选取紧跟在指定元素后的所有同级元素。在这个例子中，所有跟在`<div>`后面的`<img>`元素都会被选中。 伪类选择器进一步丰富了CSS的表达能力。`:nth-child(n)`和`:nth-last-child(n)`分别用来选择父元素的第n个子元素和倒数第n个子元素。`:last-child`选择最后一个子元素，`:checked`选择已被选中的表单元素，如复选框或单选按钮。`:empty`选择没有任何子元素（包括文本节点）的元素，`:only-child`选择其父元素下唯一的子元素，`:nth-of-type(odd)`和`:nth-of-type(even)`则分别选择奇数位置和偶数位置的特定类型的子元素。 HTML5是Web标准的重要里程碑，自2007年提出以来，逐渐成为现代网页开发的核心。它强调内容与表现分离，提供了新的语义化标签如`<header>`, `<footer>`, `<section>`, `<article>`等，增强了网页结构的清晰度。HTML5的亮点还包括对离线存储的支持，使得网页应用可以在离线状态下也能运行。`<canvas>`和`<video>`元素的引入，让动态图形和多媒体播放变得简单。此外，HTML5还添加了`<form>`元素的新特性，如`<input type="date">`, `<input type="range">`等，提供了更好的表单数据输入体验。 浏览器对HTML5的支持逐步增强，Opera 9.5+、Safari 3.1+、Firefox 3.1+和Internet Explorer 8.0+等都不同程度地支持HTML5的新特性，比如跨文档消息传递、服务器发送事件、Web Forms 2.0、离线数据存储API、地理位置定位、Web Workers以及可编辑内容等。 通过这个讲座，我们可以了解到HTML5和CSS3如何改变了Web开发的格局，以及如何利用这些新技术来创建更强大、更富交互性的网页。