CSS教程:first-letter伪类元素的特点

作者佚名技术来源 CSS技术浏览发布时间 2012-03-01

olor: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }

原谅我的js水平，我始终无法直接定义num的方法，我只能给其添加一些标记，以至于代码如此臃肿，我相信一定有更简单、更强大的js方法。

接下来，我们只需要在css中这样定义：

   1:  #demo #first-letter-plus { font-size:40px; font-family:"楷体_GB2312";

   2:  font-weight:bold; font-style: normal; line-height:1.2em; float:left;

   3:  padding:5px 2px 0 0; color:#c00; }

查看效果页面1，所有的浏览器都搞定了，这一切都建立在不关闭js的前提下。但是对于一些完美者来说，考虑到有人会关闭js运行浏览器时，我们需要再额外添加一些代码：

   1:  #demo p:first-child:first-letter { font-size: 40px; font-family:"楷体_GB2312";

   2:   font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00; }