CSS伪类&&伪元素-由项目问题引发小总结
作者：kun10 发布时间：May 22, 2010 分类：CSS
开始前先问一句：现在让你说说css伪类你能说出几样？你又常用过哪几种伪类？
说句实话，自己学习css的时候很粗心，对于伪类真的了解不多，最多知道的就是:hover，还知道在ie6下面hover只对a元素有效。于是乎觉得它功能很弱小，一直没有什么关注。
直至自己最近做项目时候遇到一个需求，要对段落第一个字母的样式进行单独控制（很常见的段落首字加粗或加大的那种效果），由于不熟悉伪类，接到需求自己很快的就敲定了一个html结构。
<p><span>这</span>是一段话</p>
通过span元素把第一个字从段落中分离出来，然后单独的定义样式。
这样的确是一种解法，但是这样的段落对于后期的维护不太有利，特别是要有一个不太懂html的人来维护这段话，很容易忽略掉span标签的作用。对于后台来说，对文本数据做处理又麻烦了一步。
很凑巧，今天逛了王卓同学的blog，发现他的文章以及回复留言处都是做成首字大写加粗变色的样子，很好奇，于是忍不住按了F12。
发现他的html中没有加过span，整段文字成一段，这样对于维护成本确实是减少不少。
那他这里是怎么实现的呢？其实很简单，使用了css伪元素:first-letter。
.paragraph:first-letter{
....
}
这样子，段落文本本身不需要使用任何的标签单独的隔离出来。
在此我突然想把伪类和伪元素总结一下，于是看了看w3school上面。我也自己再过一遍。
伪类及其支持情况
伪元素及其支持情况
套用@化龙的一句话，前端做的优化要考虑到成本和代价问题，在这次这个问题上，真的得以体现了，很明显使用css伪元素大大简化了后台开发人员和维护人员的操作，把样式和内容做了分离~~~
============= 也欢迎各位提出伪类伪元素的各种小技巧 ===============
仅有一条评论 »
感谢,收货一小下..