提到伪类，在我的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等，说实在其他的我发现"然并卵"。
　　 &&百度一下:after和:before会发现有很多关于研究它们用法的文章，形形***各式各样，说明这两个伪元素在实际工作中还是很实用的，再结合css3的动画，它们能为页面添加很多意想不到的效果！
& & & & &从学习伪类，不小心又延伸到了伪类元素（eg.我们常见的::before和:hover之间为什么缺少了一个冒号呢?），那什么又叫伪类元素？伪类和伪类元素有什么区别？下面就跟着我一起来学习一下吧O(&_&)O~有说的不对的地方欢迎批评指正！~
伪类和伪元素
　　 w3c上对伪类和为元素的定义分别为,　　
伪类：伪类用于向某些选择器添加特殊的效果。
伪元素：伪元素用于将特殊的效果添加到某些选择器
& & &css3为了明确伪类和伪元素的区别，已经明确了单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
span:hover
span::before
& & &但是，为了保证兼容性，现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍~
& & &常见的伪类（pseudo-classes）和伪元素（pseudo-elements）
　　伪元素的兼容性
&Chrome 2+,
&Firefox 3.5+ (3.0 had partial support),
&Safari 1.3+,
&Opera 9.2+,
&IE8+ (with some minor bugs),
&几乎所有的移动浏览器。
&伪元素:before和:after的定义和基本用法
& & & & :before & 选择器在被选元素的内容前面插入内容。&&
& & & & :after & & 选择器在被选元素的内容后面插入内容。
&&　　&使用 content 属性来指定要插入的内容。　　
　　　content有几个比较有用的值：
&[String]&& 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
a:after { content: "?"; }
&attr()&& 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：
a:after { content:"(" attr(href) ")"; }
url() /&uri()&& 用于引用媒体文件。示例：
h1::before { content: url(logo.png); }
counter()&& &调用计数器，可以不使用列表元素实现序号功能。具体请参见&counter-increment 和 counter-reset 属性的用法。示例：
h2:before { counter-increment: content: "Chapter " counter(chapter) ". " }
& & ----------------------------------- 一个粗糙的栗子 ---------------------------------------
& & 为了写出让自己看得懂也能让别人看的懂的博客，下面我们来举一个（粗糙的）栗子~
& & 详细代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&
blockquote{
background-color: #
height: 100
width: 400
text-align:
line-height: 100
blockquote:hover:before{
content: '啊啊啊啊哦';
blockquote:hover:after{
content: '啊啊啊啊哦诶';
&blockquote&我是一个blockquote&/blockquote&
鼠标没有移动到blockqoute上的时候是酱紫的，
鼠标移动到blockqoute上的时候是酱紫的， & & & &
这样就实现了 &&伪元素:before和:after将特殊的效果添加到blockqoute上的效果 &&，当然这个很糙的栗子只是体现了它的基本用法而已，下面我们来了解一下它的一些有意思的用法吧~
&有意思的用法
& & & &好吧，第一个用法确实没什么意思?(?_?)?，但是很实用有木有~(～￣?￣)～
& & & &网上在介绍清浮动中最狂拽炫酷吊炸天的清浮动方法 : ) &，只要把.clearfix加在浮动父级就可以了
.clearfix{zoom:1;}
.clearfix:after {clear:content:'.';display:width: 0;height: 0;visibility:}
给浮动父级添加clearfix后
模拟float:center（当然并没有center这个值，只是模拟）& &&
& & & & & & 这样利用伪元素:before和浮动，就能创造出两个没有内容的占位块，实现文字环绕图片的效果了~~效果蛮不错的有木有
& & & & & &
.box .left{
//左边的文字块
.box .left:before{
content: '';
height: 245
width: 153
.box .right{
//右边的文字块
.box .right:before{
content: '';
height: 245
width: 153
&一些实用的小图标、小图形
　　这些图标都是可以利用伪元素做出来的哟！~不用再引用麻烦的bootstrap图标了，还得引入他们的一堆文件惹，真麻烦~&(￣～￣) ~真矫情
& & &&（实用小图标的源css代码都在这里面哟！）
& & & & 还有3D的ribbons，不用图片也可以呢！只要只兼容IE8+就可以用啦，Everybody loves ribbons,so do I. 时常觉得CSS真心是艺术~
& & & &&（ribbon源码）
&作为列表序号
& & 怎样作为列表序号呢？我先举个栗子~
& &像这样的1,2,3的序号一般大家是怎样做的呢？用span？用图片？是不是用了span后还要进行定位？是不是很麻烦呢？
& &现在我们可以用伪元素来做列表序号，而且列表的一项删除了以后，其他的列表序号会自动改变，成为一个有顺序的列表~484很方便！
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&
margin: 0;
padding: 0;
width:1000
counter-reset:
list-style:
background-color: #
margin-top: 10
ul&li:before{
content: counter(li);
counter-increment:
background-color: #333;
padding: 0 5
margin-right: 10
&li&List item one&/li&
&li&The second item on the list&/li&
&li&Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&/li&
&li&And here is number four.&/li&
&li&The fifth item on the list&/li&
&li&The sixth item on the list&/li&
&不过这里需要一个用到content的一个属性，那就是counter()。对于couter又是一个知识点，后期可以进行深入了解，这里找到了一个相关的有用博文，~
& & & 作为文字提示~在这里我就不赘述啦
&炫酷导航效果
& & & 这些导航真的很炫酷，除了很多css3的效果外，很多效果都用到了:before和:after伪元素~有空的时候一定要一个个做做试试看！
　　　　对于伪元素的应用上还有很多值得人去探寻的东西，我提到的估计也不过是冰山一角，小小的伪元素竟然能实现那么多的功能~看来需要学的还有很多
参考资料：/a/4493
& & & & & & &&/css3/pseudo-element-roundup.html
阅读(...) 评论()　　 前些天去考科目二，感觉经历了一场不是高考却胜似高考的考试（10年前的5分之差， 还是难以释怀）！
　 & &一行八人，就我学的时间最少（4天，8人一辆车），教练都觉得我肯定还得再来一次！
　　 靠着运气和信念，惊险的通过了侧方停车和倒车入库，终于还是抚慰了一下10年前那颗年轻的心！
　　&--------------------感慨完毕，回归主题--------------------
& & & &终于修改完了客户提交的bugs，发布、更新、测试、邮件通知，悠哉悠哉的浏览博客园...然后客户来了...
　　 客户：我提的需求怎么都没修改，这个按钮颜色也没变，点击效果还是以前的，那个界面也没修改...!@#$%^&*...
　　&　我：我这里都正常的，截图给你看下...
　　 客户：要不你远程看下什么问题。
　　　 我：哦，浏览器缓存没有更新，你强制刷新下
　　 客户：怎么强制刷新?
　　　 我：ctrl+f5，手机上...!@#$%^&*...
　　&客户：(° ?°)~@
& & & &--------------------以上对话来源生活，如有雷同，实属正常--------------------
& & & & 每次更新后，总会产生这样的对话，每次解释半天都是无功而返，最后还是一个个的给每个js,css文件加上 ?v=111 这样的字样，劳心又费神，还不讨好。
　　 &然后引入combres 以为可以万事大吉了，增加js和css引用麻烦，每次去修改配置也是麻烦，同事也都不愿意用了。
　　 &最后，只能要求大家修改时都添加 ?v=xxx 的字样，律己容易律人难，再则操作确实也不方便，大家更不愿意弄了。
　　 &你不去修改，问题就在那里，只增不减...
　　后来发现VS有这么一个功能，可以把代码片段拖到工具栏，点击可以自动快捷输入，效果如下，用起来非常方便，当时就想如果js和css版本号也可以有快捷的输入，大家也会更愿意去操作吧，但是因为这个内容是固定的，所以用起来还是不太方便。于是，路漫漫其修远兮，吾将上下而求索！
VS插件开发---自己动手，丰衣足食
　　　直到看到这个 &文章，我就知道了：只要你想，就有可能。至于***&VisualStudio SDK，创建项目之类的，前面的文章已经讲得蛮多了。有兴趣的可以移步前面的文章链接哈！
　　　配置要修改的不多，基本就是图标、快捷键、菜单名称等。以下是我的完整配置文件
&?xml version=&1.0& encoding=&utf-8&?&
&CommandTable xmlns=&/VisualStudio//CommandTable& xmlns:xs=&http://www.w3.org/2001/XMLSchema&&
This is the file that defines the actual layout and type of the commands.
It is divided in different sections (e.g. command definition, command
placement, ...), with each defining a specific set of properties.
See the comment before each section for more details about how to
use it. --&
The VSCT compiler (the tool that translates this file into the binary
format that VisualStudio will consume) has the ability to run a preprocessor
this preprocessor is (usually) the C++ preprocessor, so
it is possible to define includes and macros with the same syntax used
in C++ files. Using this ability of the compiler here, we include some files
defining some of the constants that we will use inside the file. --&
&!--This is the file that defines the IDs for all the commands exposed by VisualStudio. --&
&Extern href=&stdidcmd.h&/&
&!--This header contains the command ids for the menus provided by the shell. --&
&Extern href=&vsshlids.h&/&
&!--The Commands section is where commands, menus, and menu groups are defined.
This section uses a Guid to identify the package that provides the command defined inside it. --&
&Commands package=&guidfillVersionPackage&&
&!-- Inside this section we have different sub-sections: one for the menus, another
for the menu groups, one for the buttons (the actual commands), one for the combos
and the last one for the bitmaps used. Each element is identified by a command id that
is a unique pair of guid an the guid part of the identifier is usually
called &command set& and is used to group different command inside a logically related
your package should define its own command set in order to avoid collisions
with command ids defined by other packages. --&
&!-- In this section you can define new menu groups. A menu group is a container for
other menus or buttons (commands); from a visual point of view you can see the
group as the part of a menu contained between two lines. The parent of a group
must be a menu. --&
&Group guid=&guidfillVersionPackageCmdSet& id=&MyMenuGroup& priority=&0x0600&&
&Parent guid=&guidSHLMainMenu& id=&IDM_VS_MENU_TOOLS&/&
&!--Buttons section. --&
&!--This section defines the elements the user can interact with, like a menu command or a button
or combo box in a toolbar. --&
&!--To define a menu group you have to specify its ID, the parent menu and its display priority.
The command is visible and enabled by default. If you need to change the visibility, status, etc, you can use
the CommandFlag node.
You can add more than one CommandFlag node e.g.:
&CommandFlag&DefaultInvisible&/CommandFlag&
&CommandFlag&DynamicVisibility&/CommandFlag&
If you do not want an image next to your command, remove the Icon node /& --&
&Button guid=&guidfillVersionPackageCmdSet& id=&fillVersionId& priority=&0x0100& type=&Button&&
&Parent guid=&guidfillVersionPackageCmdSet& id=&MyMenuGroup& /&
&Icon guid=&guidImages& id=&bmpPic1& /&
&ButtonText&设置版本号&/ButtonText&
&/Strings&
&/Buttons&
&!--The bitmaps section is used to define the bitmaps that are used for the commands.--&
The bitmap id is defined in a way that is a little bit different from the others:
the declaration starts with a guid for the bitmap strip, then there i sthe resource id of the
bitmap strip containing the bitmaps and then there are the numeric ids of the elements used
inside a button definition. An important aspect of this declaration is that the element id
must be the actual index (1-based) of the bitmap inside the bitmap strip. --&
&Bitmap guid=&guidImages& href=&Resources\fillVersion.png& usedList=&bmpPic1&/&
&/Bitmaps&
&/Commands&
&KeyBindings&
&!-- 设置快捷键 alt+J. --&
&KeyBinding guid=&guidfillVersionPackageCmdSet& id=&fillVersionId& editor=&guidVSStd97& key1=&J& mod1=&ALT& /&
&/KeyBindings&
&!-- This is the package guid. --&
&GuidSymbol name=&guidfillVersionPackage& value=&{67c49ffd-7eca--a837fb03a08c}& /&
&!-- This is the guid used to group the menu commands together --&
&GuidSymbol name=&guidfillVersionPackageCmdSet& value=&{af86a8d5-ac26-40b6-be11-0fcf3d9bd974}&&
&IDSymbol name=&MyMenuGroup& value=&0x1020& /&
&IDSymbol name=&fillVersionId& value=&0x0100& /&
&/GuidSymbol&
&GuidSymbol name=&guidImages& value=&{da4--2b65d5e9ad59}& &
&IDSymbol name=&bmpPic1& value=&1& /&
&IDSymbol name=&bmpPic2& value=&2& /&
&IDSymbol name=&bmpPicSearch& value=&3& /&
&IDSymbol name=&bmpPicX& value=&4& /&
&IDSymbol name=&bmpPicArrows& value=&5& /&
&IDSymbol name=&bmpPicStrikethrough& value=&6& /&
&/GuidSymbol&
&/Symbols&
&/CommandTable&
　　搭好项目，配置完成，我们开始上菜了。
小菜第一版
　　我们知道菜单的逻辑都在&fillVersion.cs &-》MenuItemCallback 中实现
　　第一版功能非常简单，就是简单的输入 ?v=yyyyMMddss，表面上已经实现了我的想法，确实也比原来方便多了，只要按下快捷键就完成原来多次输入的效果，代码如下
　 &效果如下：
　　但是问题来了：
　　A、光标一定要定位到文件名后面，这完全是在制造麻烦么?
　　B、我要同时给几个js添加版本号怎么办？一个个添加？这还是在制造麻烦么？
　　C、我要同时给js和css添加版本号又怎么办呢？
　　带着这些疑问，我开始了新的起航。
小菜最终版
&　　在解决第一版提出的问题，首先我们得解析我们选中的内容，随便百度一下，我就发现了&HtmlAgilityPack，后面的工作就简单了，便利选中&script和link&标签，获取&href，src 属性，加个?v=yyyyMMddss 就OK了。
　　 这个版本，我们可以直接多个标签批量设置版本号了，操作就更方便了。使用方便了，同事自然就想用了，都不用我去要求了。
　　 直接上代码吧，大家一看就了然了，没有注释哈，代码就是最好的注释了。
1 var dte = this.ServiceProvider.GetService(typeof(DTE)) as DTE;
2 var selection = dte.ActiveDocument.Selection as TextS//当前文档中选中的部分
3 if (selection == null)
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(selection.Text);
HtmlNodeCollection script = doc.DocumentNode.SelectNodes(&//script&);
string versionstr = &?v=& + DateTime.Now.ToString(&yyyyMMddss&);
if (link != null)
foreach (HtmlNode categoryNode in link)
string href = categoryNode.Attributes[&href&].V
href = href.Substring( newcontent += &&link type=\&text/css\& rel=\&stylesheet\& href=\&& + href + &\& /&\r\n&;
if (src.IndexOf(&?&) & src +=
if (newcontent.Length == 　　再上几张最后的效果图，有图有真像，后面还有代码哦（至于最后用HJ这个图标，就是为了给媳妇邀功&\\*^o^*//&)。
　　　　　　　　　　　　　　(选择一行) & & & & &&
　　　　　　　　　 & & & & & & & &&(选择多行，包含link,script标签) & & && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
　　　　　　　　　　　　　　　　
　　虽然这个插件功能非常简单，但是整理这个开发的过程还是用了好几个晚上。个人觉得还是蛮实用的（至少对我们开发，还是非常有帮助的），特来分享给大家（后面有***文件和源码）。
　　觉得有帮助呢，动动手指点个赞，图个高兴；觉得写得不好，也接受拍砖哈；写得不正确的地方，请不吝赐教下哈，共同进步！
　　***文件，
　　源代码，压缩后还有11M，只能上传CSDN了，免积分哦。。
　　&成为一名优秀的程序员！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7521次
排名：千里之外
原创：14篇
(1)(1)(11)(1)