伪元素的介绍及使用场合

 

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

那么我们简单了解一下他们的作用

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个

			p::first-line {font-weight:bold;}
		

::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉，

			p::first-letter {font-size: 56px;float:left;margin-right:3px;}
		

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，

			.clearfix:before,
			.clearfix:after {
			     content: ".";
			     display: block;
			     height: 0;
			     visibility: hidden;
			  }
			 .clearfix:after {clear: both;}
			 .clearfix {zoom: 1;}
		

当然可以利用他们制作出其他更好的效果，比如本站首面的那个三角纸张效果，也是通过这个来实现的。

::selection用来改变浏览网页选中文的默认效果

前天在一个前端群中碰到一个网友问了一个有关于唐人的CSS帝国中关于选择文本，背景是红色，而文本是白色的问题，如下图所示：

或许大家对这样的实现并不陌生，可是有很多童鞋可能跟我一样，并不知道是如何实现，因为在默认情况下，选择网站文本都是深蓝的背景，白色的字体,就如下本站的而言，选择文本后，背景是深蓝色，而选中的文本就是白色，如下图所示：

后来带着这样的问题，我也是到处寻找解决的方法，几经高人指点，说是CSS的“::selection”实现的，这样一来在google中大量搜索有关于“::selection”的使用方法，功夫不负有心人，总算是搞清楚了。后来觉得这个蛮有意思的，特意整理出来与大家一起分享。

就如前面所言，大家都知道浏览器对选中的文本默认样式都是统一的，Windows下是一个深蓝色的背景，白字的前景，而在Mac下是一个淡蓝色背景，白色字体，就如上图所展示的一样，自从有了这个“::selection”选择器后，我们在部分浏览器中可以设置你所需要的样式，下面就让我来告诉大家如何使用这个“::selection”来改变在浏览器中选中文本后的背景色与前景色。

::selection使用语法：

   /*Webkit,Opera9.5+,Ie9+*/
   ::selection {
	background: 颜色值；
	color:颜色值；
   }
   /*Mozilla Firefox*/
   ::-moz-selection {
	background: 颜色值；
	color:颜色值；
    }

兼容的浏览器：

::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”，查阅相关w3c官方资料，并没有对这个属性的解说资料，只知道这个属性被规纳在CSS的伪类选择器中。

下面我们一起来看看其具体使用，例如如我们在Web页面中有这么一段话：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor pede sit amet odio varius consectetuer. Fusce bibendum neque eu purus. Donec et nulla at odio volutpat luctus. Cras facilisis consequat nisi. Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.

在默认情况下，在上面段落中选中任意文本，其背景都是深蓝，前景是白色，下面我们给他加上一个“::selection”运用，把背景改成红色，前景依旧是白色：

  p::selection {
    background: red;
    color: #fff;
  }
  p::-moz-selection {
    background: red;
    color: #fff;
  }

加上上面属性后，你会后到，选中的文本其背景是红色，而前景是白色，跟唐人的CSS帝国的效果是一模一样的了，如下图所示：

不知道你有没有这样的想法，我一开始冒出这样的一个想法，就是我能不能通过“::selection”来改变选中的文本其他样式呢？比如说，改变选中的字体，字号等等；于是我在上面的代码基础上加了一个15px的字号：

   p::selection {
     background: red;
     color: #fff;
     font-size: 15px;
   }
		
   p::-moz-selection {
     background: red;
     color: #fff;
     font-size: 15px;
   }

大家猜结果如何？告诉大家吧，有点失望，结果是没有任何效果，如下所示：

这样一来也验证了:“::selection”只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。