CSS3进阶：背景重叠与新选择器详解

CSS3笔记1深入解析了CSS3这一最新的网页设计语言标准，它在原有的基础上引入了许多新特性和改进。本文将重点关注以下几个关键知识点： 1. **CSS3兼容性与厂商前缀** - CSS3虽然提供了丰富的功能，但并非所有浏览器都立即支持所有特性。为了确保兼容性，主要的浏览器厂商（如Chrome、Safari、Firefox、IE和Opera）会在新特性前面加上特定的前缀，例如`-webkit-`（Chrome/Safari）、`-moz-`（Firefox）等。这种做法被称为浏览器厂商前缀，开发者需要在编写代码时考虑到这些差异，确保在旧版浏览器中也能正常工作。 2. **新增单位rem** - `rem` 是CSS3引入的一个重要单位，基于相对单位，可以根据父元素的字体大小进行设置。使用`rem`可以使设计更加灵活，尤其适合响应式设计，因为移动端可以通过调整根元素字体大小实现自适应。注意，Chrome浏览器对小于12px的字体大小不支持，需谨慎使用。 3. **选择器的新颖性** - 除了传统的ID和class选择器，CSS3引入了结构性伪类（如`:first-child`,`:last-child`,`:nth-child`等），以及元素状态伪类（`:hover`,`:enabled`,`:disabled`等）。属性选择器（如E[attr]）允许根据元素属性的值进行筛选，极大地扩展了选择元素的灵活性。 4. **文本效果与伪元素** - CSS3提供了一系列文本效果，如文本阴影、伪元素（如`:hover`,`:focus`）的样式。`::selection`允许开发者定制用户选中文本的外观，尽管其支持有限。 5. **CSS3的其他新特性** - 包括盒模型的改进（如盒子大小设置）、多背景图片的处理（遵循“先占先得”原则）、以及不同类型的渐变（如放射性渐变和重复性渐变）等，这些都是提升网页设计质量和用户体验的重要工具。 学习并掌握CSS3的关键在于理解其新选择器、单位、文本效果和布局规则，以及如何处理跨浏览器兼容性问题。熟练运用这些新特性，能够让你的网页设计更具现代感和交互性。