You are here
css 伪类
如果大家经常关注互联网新网站和应用的话，或者你喜欢收集不同的网站模板，你会发现越来越多的网站模板或者网站在使用CSS伪类 - pseudo class。
今天我们这里给大家简单介绍伪类中经常使用的俩个:before和:after。希望大家能够觉得有帮助！
如果你喜欢我们的文章，或者有任何问题，请给我们留言，谢谢！
什么是伪类(pseudo class)？
pseudo这个单词来源于希腊语的音译，意思是虚构的，假的，或者伪的意思。因此这里不难理解为什么我们称之为伪类。
和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。
因此大家需要注意一下几点：
- 它们不是真正的元素，对于很多情况下，大家不用用它展示实际意义的内容，尽量用它显示修饰性内容或者设计性内容，例如，图标
- 要知道有些相关的开发工具，例如著名的开发工具firebug根本就不显示任何的伪类生成内容，如果你使用的话，你知道后果的！你将陷入盲目的debug中。当然你使用Chrome可以看到样式，但是在DOM看不到元素。
什么时候使用伪类(pseudo class)？
如果你需要创建一些修饰类图标，或者设计UI的时候，使用伪类是相当方便的，大家可能还记得那篇分享一个纯CSS开发的气泡式提示框文章吧，一个非常准确的使用场景。
支持的浏览器
- Chrome 2+
- Firefox 3.5+ (FF3.0支持部分),
- Safari 1.3+
- Opera 9.2+
- IE8+
- 手机上的浏览器
基本使用方法
如果我们有一个链接元素，如下：
<a href="http://www.gbin1.com" id="gbin1">GBIN1</a>
如果我们定义了相关的CSS，如下：
#gbin1{
font-size: 12px
background: #202020
}
我们使用:before生成当前元素前面的伪元素样式和内容，这里我们需要使用content属性，注意我们可以使用文字类，或者图片，如下：
#gbin1:before{
content: url("images/gbin1icon.png");
}
我们使用:after生成此元素后面内容的样式和内容，如下：
#gbin1:after{
content: attr(href);
}
上面例子可以看到，我们使用content生成伪对象内容，使用的是一个图片作为元素内容，如果你不使用content对象，伪类基本没有任何使用价值。
同时我们可以使用attr来引用元素的属性，例如这里我们可以读取id=gbin1的元素的href属性对应的值做为:after生成的伪元素内容。
如果你见到::before和::after的样式，也不用奇怪，唯一区别在于这是CSS3的伪类表示方法。
注意：上面代码中，我们在:before中生成一个图片内容： url("images/gbin1icon.png"); ，注意没有引号，否则内容将不是图片，而是"url("image..")"字符串儿。
缺省情况下， 伪类元素display缺省属性是inline，你可以通过设置display: block来修改显示方式。以下代码将生成一个区域的伪类元素：
#gbin1:before{
content: "";
display: block;
width: 200px;
height: 200px;
}
注意：你不能删除content属性，否则这个伪类生成的元素将不存在。
这里我们使用伪类来生成带有图表的链接按钮，代码如下：
#gbin1:before{
content: "";
padding: 10px 15px;
margin: 10px 15px;
background: url("images/gbin1icon.png") no-repeat scroll 0% 50% transparent;
}
#gbin1:after{
content: attr(href);
padding: 20px;
margin: 20px;
}
生成内容如下图：
各部分代码生成的元素内容如下图：
以上介绍我们基本简单的介绍了伪类在CSS中的使用，希望对于没有接触过伪类的朋友有帮助，谢谢！
来源：CSS伪类(pseudo class)简明介绍之:before和:after
来自 http://www.gbin1.com/technology/css/20120426introduction-of-pseduo-class/
清除浮动新说
起源：
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ |
说明：
- *对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。 - *第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则： - * height:1% 用来触发 IE6 下的haslayout。
- *重新对 IE/Mac 外的IE应用 block 显示属性。
- *最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近
标准的路上，这个方法就不再那么与时俱进了。
抛掉对 IE/Mac 的支持之后，新的清除浮动方法：
/* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ |
说明：
IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。
糖伴西红柿说：
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成：
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix{*zoom:1;} |
以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。
我平时都是用 overflow:hidden 来清除浮动的，因为够简单粗暴。但是 overflow 有时候也不太适用：
父级元素使用 overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。
对 css3 来说，也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。
其他可能被影响的元素如 text-shadow 和 transform。可以参考 Andy Ford 的 demo
对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。
.group:after, #content:after, #sidebar:after, #some .other .thing:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; zoom:1; } |
这种情况下，html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了，css 代码却出现了一定的繁冗。而且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。
归结下来，还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，但是现在更倾向于使用 clearfix，感觉这种一体化的东西更靠谱，能避免偶尔对 zoom 的遗忘。
成熟的东西稳定性好，但是会比较复杂、厚重;简单的灵活性好，但是过于零散、随意，没有组织性，还没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题本身还让人头疼.
我个人的想法是没有好与坏的区别，只有合适不合适的区别。但是我们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。经常可见对 一些工具的讨论，都是奔着争出个谁好谁坏而去的，例如 jQuery mootools YUI.相比起到底是好谁坏，我们还是最好赶紧转变思想，摒弃”一刀切”的思想吧。
最后，关于为什么要采用一下这种复杂方式来针对IE6/7，而不采用其他稍微简洁的方式，还希望大家给我指点下迷津。
* html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ 来自 http://www.qianduan.net/new-clearfix.html
关于伪类元素:before和:after
Posted @2011-11-02 3:02 p.m.
Categories css
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：
#example:before {
content: "#";
color: red;
}
#example:after {
content: "$";
color: red;
}这段代码会在#example元素内容之前插入一个'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下:
Here is the example content
需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。
#example:before {
content: "";
display: block;
width: 100px;
height: 100px;
}伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。
除了插入文字内容，还可以指定其他内容：
p:before {
content: url('img.jpg');
}
a:after {
content: attr(href);
}attr()函数会返回指定元素对应属性的值
最后，奉上最惦记的浏览器支持情况
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- Pretty much all mobile browsers.
放在伪类元素里面的内容一般都只是装饰性的，所以即便是IE6/7不支持也应该能降级到正常显示主体内容。
:before和:after的一些惊人用法
>. clearfix hack
如果父元素容器里面的子元素是浮动元素的话，我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元 素内容撑起，但是这种方法引入了多余的无意义标签，并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS，所以在一些 CSS文件中经常会看到类似于.clearfix这样的类出没，只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一 个实现：(via Nicolas Gallagher)
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}>. CSS实现的八卦图案
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}来自 http://www.hulufei.com/post/about-before-and-after-pseudo-element