关于一些 css3 新特性的研究

Task_1_12

任务描述

实现单双行列不同颜色，且前三行特殊表示的表格 实现正常状态和 focus 状态宽度不一致的 input 文本输入框，且鼠标焦点进入输入框时，宽度的变化以动画呈现 不使用 JavaScript，实现一个 Banner 图轮流播放的效果，且点击右下角的 1，2，3 可以切换到对应 Banner 图片

使用纯 css 来实现第一个任务，我的脑海里第一个浮现的就是强大的 nth-child 选择器，可以完美实现需求，至于兼容性，除了 IE8 以及更早的浏览器都支持，对于大多数的用户来说已经完全支持，perfect！ 第二个任务就需要用到 transition 这个用来过渡展示效果的属性。 第三个任务一开始完全没有头绪，经过查看手册，发现了同样相当完美的 target 选择器，兼容性依然是除 IE8 及更早的浏览器全部都支持。

收获

任务一

首先依然是不太熟悉的 table 布局，一开始一直在纠结竖直方向的分割线如何实现。尝试了许多种 border 的写法都不能完美的实现设计图中的边框，在 review 了一些团队的代码后发现似乎并没有使用到特殊的 hack，没有思路的情况下选择了先实现其他的效果，结果发现分割线自动显示出来。经过查看 chrome 开发者模式下 table 的默认属性，发现 border-collapse 属性的默认值是 separate，即边框会以分隔的形式表现，如果将这个值改为 collapse 则中间的分隔竖线会消失。经过测试发现浏览器在处理 separate 时默认选择了背景色作为分割线。 实现的效果很简单，用 css3 的 nth-child 选择器可以在不添加一个类名的情况下全部实现。首先介绍一下 nth-child 选择器：

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 :nth-child(odd) 奇数个子元素 :nth-child(even) 偶数个子元素 :nth-child(3n+1) n 从 0 开始计数

但是对于第一行来说和下面的样式区别较大，因此将 table 分成三部分 thead,tfoot,tbody,经过查阅标准后得知浏览器对于这三个标签的支持并不好，而且依据标准这三个标签需要一起使用，因此真正实现的时候需要灵活使用通过添加类名的方式来实现各部分更精细的效果，不必苛求 nth-child 选择器。

任务二

任务二比较简单，只需要使用 css3 里的 transition 以及:focus 选择器即可。唯一比较遗憾（开心）的是 IE10 及以上才支持 transition，兼容性不佳，此处不再赘述。

任务三

往常说到轮播图，第一感觉就是 js 的思路，但是这个任务目标让我眼前一亮，因为从来没有想到 css3 有这么强大的选择器。没错，就是 target！可以通过锚点选取到活动元素之后产生效果。最初对这个选择器理解有误，以为是在锚点元素上使用，经过不断测试发现需要是在选取到的活动元素上作用。 我完成轮播图的思路是固定一个区域的宽高，设置溢出隐藏，之后在内部的一个容器中放三个内容块使其处于同一行，通过设置该容器的左右移动和过渡来实现轮播图左右切换的效果。 遇到的又一个问题就是，最初将内容块的 id 设置为锚对应的值，之后发现目前的 css 标准中并没有可以选择父元素的选择器，因此额外增加了三个标签和~选择器用于选取显示内容块，个人感觉有些繁琐，不够优雅。

小结

任务一和任务三加深了我对 css3 选择器的理解，任务二则是简单的应用 transition。任务并没有过多的提及 css3 中的变换，之前研究了一下 2d 变换和 3d 变换以及 css3 动画的实现，感受到 css3 的强大之处，希望在以后的学习中能够加深这一部分的理解，用 css 完成更多精美的动效。

参考资料

我的 IFE 代码仓库 CSS3 :nth-child()选择器 自己写的一些 css3 小 demo css 基础属性研究 自留地——box-shadow 的研究