CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪类了。
Creative Button Styles
在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将伪类用于添加一些自定义字符时，只需使用伪类普遍的单冒号写法，以保证浏览器的兼容性：
在一些很长的表格中，常常会使用表头悬浮的设计以方便阅读，即在表格离开窗口之前，表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素，也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。
这种效果一直以来需要通过 JavaScript 实现。不过就在去年，这项结合了 Relative （在屏幕中时） 和 Fixed （移出屏幕时） 的样式效果被提案添加到了 CSS3 中。下面是一个示例：
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: sticky;
top: 15px; // 使用和 Fixed 同样的方式设定位置
}
因为这个样式尚未进入标准，还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式：
在CSS中，有一个极其实用的功能：@media 响应式布局。具体来说，就是可以根据客户端的介质和屏幕大小，提供不同的样式表或者只展示样式表中的一部分。通过响应式布局，可以达到只使用单一文件提供多平台的兼容性，省去了诸如浏览器判断之类的代码。
当然这种设计也存在着缺点，比如我所见的不少使用响应式布局的设计在适配移动端时大量使用 display:none 隐藏富媒体元素，这样势必会导致大量不必要的流量。因此，如果有较为重要的移动端需求，那么还是开发专门的移动版页面为好。不过，对于诸如内容较少的页面或者单页式网站来说，响应式布局依然不失为一种偷懒的好方法 ^ ^
<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">
这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。