利用css3中的伪元素选择器实现如下效果文章段落修饰

利用css3中的伪元素选择器实现如下效果：

html:

<div id="content">
<p>	豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。(豫章故郡 一作：南昌故郡)
</p>
<p>	豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。(豫章故郡 一作：南昌故郡)
</p>
<p>	披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。(轴 通：舳；迷津 一作：弥津；云销雨霁，彩彻区明 一作：虹销雨霁，彩彻云衢)
</p>
<p>	遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？(遥襟甫畅 一作：遥吟俯畅)	
</p>		
</div>

css:

<style type="text/css">
	#content{
		width: 790px;
		height: 600px;
		margin: 80px auto 0;
		background-color: #F7F7F7;
		padding: 8px 5px;
		/*font-size: 14px;*/
		font-size: 80%/1.6;
		color: #61656B;
	}
	#content p{
		text-indent: 2em;
		text-align:justify;
	}
	#content p::first-line{
		color: #293DFE;
	}
	#content p:first-child:first-letter{
		font-size: 2em;
		padding: 0.1em;
		color: red;
		vertical-align: middle;
	}
</style>

CSS选择文本段第一行

:first-line 选择器用于选取指定选择器的首行。所有主流浏览器都支持 :first-line 选择器。

CSS3伪元素选择器

::first-line 选择文本段第一行

::first-letter 第一个字母/汉字

注意：first-line支持IE8+，first-letter支持IE7+

p:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

选择很多<p>元素中的 第一个<p>元素。

每个<p>元素的第一行设为蓝色

#content p::first-line{

color: #293DFE;

}

第一个<p>元素中的第一个汉字或者字母

段落首字母放大是指放大段落开头的字母或者汉字，主要使用了css的first-letter伪类选择器

#content p:first-child:first-letter{

font-size: 2em;

padding: 0.1em;

color: red;

vertical-align: middle;

}

text-indent:2em

文本缩进两个文字大小。

text的意思是文本、indent在计算机英语中意思是缩进。

2em意思就是2个相对单位。

em这个单位的意思是相对文字大小，1em就是1个文字大小，2em就是两个文字大小。