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

"这篇文章主要探讨了CSS选择器在HTML5和CSS3中的应用，包括属性选择器、兄弟选择器和伪类选择器等，并提到了HTML5的发展历程、支持的浏览器以及HTML5的关键特性。作者鲁超伍，网名Adam，是淘宝网北京UED的前端开发工程师，对前端开发有深厚的经验和热情。" 在CSS3中，选择器的扩展大大增强了样式表的灵活性和精确性。以下是一些关键知识点： 1. **属性选择器**： 属性选择器允许我们根据元素的属性来选择元素。例如： - `a[href$='.pdf']` 选择所有链接（`<a>`标签）其href属性以'.pdf'结尾的元素。 - `a[href^='mailto']` 选择href属性以'mailto:'开头的链接，通常用于邮件链接。 - `a[class*=‘item’]` 选择class属性包含字符串'item'的链接。 2. **兄弟选择器**： 兄弟选择器（通用兄弟选择器）如`Div~img`，选择所有紧跟在`Div`元素后面的`img`元素。这种选择器可以用来针对特定顺序的兄弟元素设置样式。 3. **伪类选择器**： 伪类选择器增强了对元素状态的控制： - `:nth-child(n)` 选择父元素中索引为n的子元素。 - `:nth-last-child(n)` 类似，但从最后一个子元素开始计算。 - `:last-child` 选择父元素的最后一个子元素。 - `:checked` 选择被选中的表单元素，如复选框或单选按钮。 - `:empty` 选择没有任何子元素（包括文本节点）的元素。 - `:only-child` 选择其父元素中唯一的孩子元素。 - `:nth-of-type(odd)` 和`:nth-of-type(even)` 分别选择奇数和偶数索引的同类型元素。 HTML5是Web标准的重要里程碑，它在2007年后开始逐渐形成并得到广泛支持。以下是一些HTML5的关键点： - **HTML5发展历史**：HTML5的演变历程从HTML4.0、XHTML1到XHTML2，最终在WHATWG和W3C的努力下形成了现在我们熟知的HTML5标准。 - **支持HTML5的浏览器**：主流浏览器如Opera、Safari、Firefox和Internet Explorer8.0+开始逐步支持HTML5的新特性，如跨文档消息传递、服务器发送事件、离线存储API、Canvas和视频元素等。 - **HTML5技术概览**： - **新增和移除的元素**：HTML5引入了新的语义化元素（如<header>, <footer>, <article>, <section>等），同时废弃了一些不再推荐使用的元素。 - **HTML5基本布局**：通过新的布局元素，开发者可以更好地组织页面结构。 - **表单支持**：增强了表单控件的功能，如新的输入类型（date、email等）和验证属性。 - **DOM变化**：DOM接口得到改进，使得操作网页内容更方便。 - **JavaScript API**：HTML5引入了一系列新的JavaScript API，如Geolocation（地理位置）、Web Workers（后台处理）、Web Storage（本地存储）等。 这些技术的进步极大地推动了Web开发的进步，使网页更富交互性和可访问性。作为前端开发工程师，了解并熟练运用这些技术是至关重要的。