Tips

在之前一篇一个IE8的新起点中，我简单列举了一些当前放开枷锁的CSS，其中之一就是伪元素。当然，在使用伪元素的时候依旧会遇到一些问题，我总结了一些，简单陈述，留个印象，那么当再次遇到的时候能够有所回想。 使用伪元素主要遇到的问题集中在IE8，因为IE8只是部分支持伪元素。首先，IE8中设置伪元素的z-index可能无效。这点广为人知，在使用伪元素制作冒泡箭头的时候会遇到，无法通过调节z-index使before置于after之上。 另一个较为常见的问题是，无法以类名触发伪元素content的重绘。如果使用过字体图标那么多半遇到过这个问题。因为大部分字体图标是通过伪元素content插入字符而成，比如在一个当前激活的导航里项上添加.active时，看到图标依旧保持着原来的颜色。其实这个不只是IE8会遇到，移动版Safari同样存在这个问题(偶发)，明明更新了类名，外观却不发生重绘。 另外，使用:…

在上一篇《CSS伪类与CSS伪元素的区别及由来》里，已经详细区分了伪类和伪元素。但在这篇讲应用的文章里，其实并不需要这么明晰的概念区分。本文也不会再重提单冒号和双冒号之间的区别，本文更关注如何更好的使用伪元素和伪类——通过罗列一些典型甚至是非典型的用法，讲述伪类和伪元素的一些使用上的小技巧。在这个过程中，始终忽略浏览器的支持情况，任何一个例子无法正确运行的话，请先检查一下你当前的浏览器，是否赶上了这个时代的浪潮～ 当然，一开始都是一些比较常规的内容，如果你对这些内容已经了然，可以直接跳到后面“非典”的部分:) 列表处理 伪类与伪元素很大部分常规用途是在处理列表的。特别是 :nth-child() 这类结构伪类。 页脚链接 页脚链接可能是一个最为合适的例子，因为例子里伪元素和伪类并用。很多网站的页脚链接是用竖线分隔的罗列&…

以前，textarea 100%宽度撑满父容器一直都是一个常常被提及的问题。作为 inline-block 显示的 textarea 无法像 block 那样在宽度上自动的充满容器，于是为了让 textarea 能够撑满容器并且回避因 padding 和 border 而产生的额外计算，各种手法也就层出不穷。 比如，设置宽度为98%，比如，嵌套一个div然后设置它的 padding-right 等于内含的 textarea 的边框和 padding 之和，再让…