今天小编跟大家讲解下有关四种css 伪类选择器 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关四种css 伪类选择器 的相关资料，希望小伙伴们看了有所帮助。
X:after
Example Source Code ：.clearfix:after {content: “”;display: block;clear: both;visibility: hidden;font-size: 0;height: 0;} .clearfix {*display: inline-block;_height: 1%;}我想上面这段代码 很多朋友都非常熟悉 是清理浮动时常用的hack方法。:after伪类与content结合使用 用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影 点击这里查看。X:hover
Example Source Code：div:hover {background: #e3e3e3;}hover在52CSS.com前面的文章中已经介绍过 IE6下只支持a的hover。 即使用border-bottom: 1px solid black; 要好于text-decoration: underline; 从实际的效果来看 使用border-bottom的距离比text-decoration来的合理 但使用border-bottom存在一些风险 比如颜色问题。X:not(selector)
Example Source Code：div:not(#container) {color: blue;} 否定伪类选择器 这还是比较好理解的 上述将会把非id为container的div的字体颜色设置为蓝色。 :not伪类IE8并不支持 IE9已经支持了。X::pseudoElement Example Source Code ：p::first-line {font-weight: bold;font-size: 1.2em;}伪类 用于给元素的片段添加样式 这如何理解呢 比如你要让一个段落的第一行的文字加粗 那么这个选择器是不二之选。 除此之外 你还可以给第一个字加上特殊样式 这个应用还是非常常见的 ::Example Source Codep::first-letter {float: left;font-size: 2em;font-weight: bold;font-family: cursive;padding-right: 2px;}
来源：爱蒂网
