在网页设计的浩瀚宇宙中，CSS（层叠样式表）无疑是一颗璀璨的明星，它赋予了网页绚丽的色彩、优雅的布局和灵动的交互。而 CSS3 作为 CSS 的进阶版本，更是为网页设计师们带来了前所未有的创作自由。今天，就让我们一同深入探索 CSS 和 CSS3 之间的区别，领略它们各自的魅力。
一、选择器的丰富程度
CSS
CSS 1 和 CSS 2 选择器种类相对有限，主要侧重于通过元素标签名、类名、ID 来选中元素。例如，使用p选择器选中所有段落元素，.my - class选择器选中具有特定类名的元素，#my - id选择器精准定位到拥有指定 ID 的唯一元素。这种选择方式在简单页面结构中十分高效，但对于复杂的页面布局和多样化的样式需求，就显得捉襟见肘。
CSS3
CSS3 引入了大量全新的选择器，极大地增强了选择元素的灵活性。像属性选择器[attr]，可以选中拥有特定属性的元素，[attr = "value"]则能精准匹配属性值完全一致的元素。还有伪类选择器:nth - of - type(n)，能轻松选中同类型元素中的第 n 个，这在处理列表项、表格行等成组元素时非常实用。比如，要为表格隔行变色，利用:nth - of - type(even)就可以轻松实现。另外，还有:target选择器用于选中当前页面 URL 中锚点指向的元素，为实现单页应用的导航效果提供了便利。
二、视觉效果与布局能力
CSS
CSS 的布局主要依赖于传统的盒模型，通过display属性设置元素为块级、行内或行内块元素，再结合float和clear属性实现元素的排列与浮动布局。对于复杂的多栏布局，需要借助繁琐的嵌套和 clearfix 技巧来清除浮动带来的影响。在视觉效果方面，基本的颜色、字体、背景设置较为常规，缺乏对一些复杂特效的支持。
CSS3
CSS3 在布局方面带来了革命性的变化。Flexbox（弹性盒子布局）为一维布局提供了强大的解决方案，它能让容器内的子元素轻松实现水平或垂直方向的对齐、分布，并且可以自动调整子元素的大小以适应容器空间。Grid（网格布局）更是将布局提升到了一个新高度，它允许创建二维的网格结构，通过定义行和列的轨道，精确地控制元素在网格中的位置，使复杂的页面布局变得轻而易举。在视觉效果上，CSS3 支持transform属性，可实现元素的平移、旋转、缩放和倾斜等变换效果，结合transition属性，能创建出平滑的过渡动画，animation属性更是开启了复杂动画创作的大门，让网页元素动起来更加生动有趣。此外，CSS3 还新增了box - shadow和text - shadow属性，分别用于添加元素的盒阴影和文字阴影，极大地丰富了页面的层次感。
三、浏览器兼容性
CSS
由于 CSS 出现时间较早，经过多年的发展，各大主流浏览器对 CSS1 和 CSS2 的支持已经非常成熟和稳定。无论是老版本的 IE 浏览器，还是现代的 Chrome、Firefox、Safari 等，都能很好地解析和渲染基于 CSS1 和 CSS2 编写的样式，几乎不存在兼容性问题。
CSS3
CSS3 的新特性虽然强大，但由于推出时间相对较晚，不同浏览器对其支持程度存在差异。早期，一些旧版本的浏览器（如 IE9 及以下）对 CSS3 的很多特性根本不支持，或者支持不完善。例如，IE9 及以下版本不支持Flexbox布局，这就需要开发者使用一些 JavaScript 库（如 Modernizr）来检测浏览器是否支持相应特性，并提供替代方案。随着浏览器的不断更新换代，如今主流浏览器对 CSS3 的支持越来越好，但在实际开发中，仍然需要考虑到一些低版本浏览器的兼容性问题，通过适当的前缀（如-webkit -、-moz -、-ms -等）来确保样式在不同浏览器中都能正确显示。
四、语法和特性复杂度
CSS
CSS 语法相对简洁明了，易于初学者上手。基本的样式声明由属性和值组成，通过选择器应用到相应元素上。例如color: red;设置文字颜色为红色，语法结构直观易懂。而且 CSS1 和 CSS2 的特性相对较少，功能较为基础，学习曲线较为平缓。
CSS3
CSS3 在带来丰富功能的同时，语法也变得更加复杂。新特性往往伴随着更多的参数和选项。以transform属性为例，transform: translateX(50px) rotate(30deg) scale(1.2);这一行代码就同时实现了元素的平移、旋转和缩放，参数的组合和顺序需要开发者仔细理解和掌握。此外，CSS3 的一些特性，如@keyframes规则用于定义复杂动画，其语法结构和关键帧的设置相对繁琐，需要开发者花费更多时间和精力去学习和实践。
CSS 和 CSS3 虽然同属一个技术体系，但 CSS3 在选择器、视觉效果、布局能力等方面的显著提升，使其成为现代网页设计不可或缺的利器。尽管在浏览器兼容性和语法复杂度上存在一些挑战，但随着技术的不断发展和完善，CSS3 正逐渐成为网页设计师们创造出更加精彩、交互性更强的网页作品的得力助手。
分享
在博客中添加一些CSS3的动画效果代码示例
介绍一些常见的CSS3属性
如何在网页设计中更好地运用CSS3
