CSS伪类与CSS伪元素的典型与非典型应用

Sword Wang -

在上一篇《CSS伪类与CSS伪元素的区别及由来》里，已经详细区分了伪类和伪元素。但在这篇讲应用的文章里，其实并不需要这么明晰的概念区分。本文也不会再重提单冒号和双冒号之间的区别，本文更关注如何更好的使用伪元素和伪类——通过罗列一些典型甚至是非典型的用法，讲述伪类和伪元素的一些使用上的小技巧。在这个过程中，始终忽略浏览器的支持情况，任何一个例子无法正确运行的话，请先检查一下你当前的浏览器，是否赶上了这个时代的浪潮～

当然，一开始都是一些比较常规的内容，如果你对这些内容已经了然，可以直接跳到后面“非典”的部分:)

列表处理

伪类与伪元素很大部分常规用途是在处理列表的。特别是 :nth-child() 这类结构伪类。

页脚链接

页脚链接可能是一个最为合适的例子，因为例子里伪元素和伪类并用。很多网站的页脚链接是用竖线分隔的罗列<a>标签形式。在这种页脚链接里使用伪类和伪元素的组合，就可以让链接的列表的HTML代码变得非常干净整洁：

ul.list{list-style:none;}
ul.list li{float:left;}
ul.list li:after{content:"\00a0|\00a0";}
ul.list li:last-child::after{content:"";}

但当前，放眼望去几乎不会有人这么做。绝大部分依然使用旧的方式。除了一些维护上的考量，习惯也是一个主要原因。熟优熟略这里不讨论，这里只是作为最典型的例子展示它们的应用。

最后项，奇偶项，倍数项

另一个广为人知的例子是：去掉列表最后一个元素的边框或者边距。在这种情况下，我们似乎已经习惯了给最后一个元素加上一个类似last-item的类名，然后单独写一条CSS规则。

ul.list li{margin-right:10px;}
ul.list li.last-item{margin-right:0;}

实际上，我自己在写的时候也会偏向一个早就习惯了的做法。在时间限定的情况下，不会考虑激进的方案，也不会考虑类似负边距或者超界显示等等优化方案，而只是一味的寻求最为保险和熟悉的习惯上的东西。习惯是可怕的顽固，所以可能今后还是会有很长一段时间不会写成下面这样：

#ul.list li{margin-right:10px;}
#ul.list li.last-child{margin-right:0;}

隔行背景色可能是奇偶项使用最多的情况，但现在又有多少人已经完全使用odd和even来替代额外添加的类名？

tr:nth-child(odd){background-color:#f4f4f4;}
tr:nth-child(even){background-color:#f9f9f9;}

还有诸如 Gallery 的特定项的边距，伪类的处理也不错不是嘛？

li:nth-child(3n) {margin-right:0;}

不过眼下，似乎更多人用负边距或者inline-block来处理，甚至直接让透明边距顶出容器，优化的手法已经很多，而且在维护性上甚至更有优势。

彩色

这其实还是上面的命题，但却单独拿出来说。如今的网页越来越多彩，也就不免单独指定一些亮丽的颜色。还是有很多人将特定的颜色用特定的类名标注。然而，如果颜色的映射顺序不怎么重要的话的，也许只是要达到多彩的简单目的，完全可以这么做：

li:nth-child(1) a{color:#f30;}
li:nth-child(2) a{color:#c0f;}
li:nth-child(3) a{color:#90f;}
li:nth-child(4) a{color:#06f;}
li:nth-child(5) a{color:#0cf;}

应对各种区块的色系调整，伪类的使用可以大幅减少HTML里的单一用途的类名。顺着这个例子推荐一个网站：xycss.com。这是一个由 Jeff Starr 建立的关于响应栅格布局的网站，他撰写的框架 xy.css 也有非常多的可以学习的地方。当然在这里举其作为例子还是因为这个网站的首页和这个例子相符——伪类实现的多彩的色块。

清除浮动

这是一个被讲烂的命题，不过我必须将其列在伪元素的典型应用的列表里，因为一般而言，伪元素(:after)在这里总是最为常见。之前我写的《再谈清除浮动》一文已经详细阐述过，所以这里不再冗述。唯一想顺带提一下的是，虽然清除浮动方法各异，但我自己其实挺偏向空标签的，原因嘛，还是习惯吧...

非典型应用

所谓的非典型应用其实无非就是“不干正经事”的意思，与当年的table多少有些神似。这部分里有一些已经淘汰的手法，但为了纪念它们存在的痕迹，还是将它们例举和提及。

阴影

如今的浏览器大部分都已经支持box-shadow这个方便的阴影制造器，也正因为此，box-shadow在如今的使用中颇为频繁。关于box-shadow的文章我也至少写过4篇：

虽然如今愈发觉得这个属性存在被滥用的危险，但是实际使用时，制造阴影往往需要和伪元素一起使用，特别是当页面中的某些布局需要额外元素制造阴影的时候。由于凡是支持box-shadow的浏览器都支持伪元素，所以几乎任何时候要添加box-shadow，伪元素都是考虑范围之一。比如，给全局网页加上一个顶部的阴影渐变：

body:before{content:"";position:fixed;top:-15px;left:0;width:100%;height:15px;box-shadow:0px 0px 15px rgba(150,150,150,.8);}

你可以直接在我的网页顶部看到效果(2013年下半年改扁平化之后应该会移除)。

CSS调试

之前写的调试样式：debug.css，部分内容是有关 :empty 伪类的应用。

div:empty,
span:empty,
li:empty,
p:empty,
td:empty,
th:empty{padding:1em;background-color:#ff0 !important;}

:empty可以在开发过程中以可视化的方式过滤空标签。

额外的提示

比如给相应的链接增加相应的内容提示:

.example-block:before {
   content: "Example:";
}

在我的印象里，早期的W3c标准文档里就是类似这么干的。这种额外信息的提示源自伪元素和CSS Content的配合使用，更多例子推荐阅读 Chris Coyier写的 CSS Content

内描边和背景透明

这两个算是浏览器在CSS2的大时代背景里夹缝里生存的trick，如今看来早已经过时。现在的内描边可以用box-shadow轻而易举的完成，透明背景则需要用到CSS的RGBA以及IE滤镜。但当时，不知道是谁想出用四角绝对定位一个伪元素，然后画边框来实现内描边，应用opacity和IE透明滤镜来实现背景透明。虽然过时，但每每提起这种陈年旧事总是感觉好怀念啊～

最后

最后的最后，说起伪元素的应用，不得不提的是一个相当妖孽的网站：One Div，用一个DIV拯救世界吧，少年！查看代码就会发现，其中充斥了伪元素和box-shadow，这么多把阴影当画笔的图标，当真是，妖孽极了...

结语

这篇写了很久，思路断断续续的，写的不好，请见谅。水平有限写的不到位的，欢迎吐槽。

这期间浏览器翻天覆地的变化，让我觉得写些东西出来过不多久就要过时似的...Opera放弃内核，Chrome和Webkit分道扬镳，现在无法判断这些事是好是坏，总而言之，不学习一直停留着的话，真是要被洪流给吞了的...加了个油！