CSS伪类和伪元素的知识和使用
这里讲解一点关于CSS伪类和伪元素的用法
一：CSS伪类用于向某些选择器添加特殊效果。
先看看例子： view plainprint?
<html> <head>
<style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%}
a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66}
a.four:link {color: #ff0000} a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline} </style> </head>
<body>
<p>请把鼠标移动到这些链接上，以查看效果：</p>
<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p> <p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p> <p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p> <p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p> </body>
</html>
PS: four中的monospace在IE6上才能看到效果, ...？
伪类的语法： view plainprint?
selector : pseudo-class {property: value}
和CSS一起使用： view plainprint?
selector.class : pseudo-class {property: value}
伪类的种类：
属性 描述 css view plainprint?
:active 向被激活的元素添加样式。 1 :focus 向拥有键盘输入焦点的元素添加样式。 2 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1 :link 向未被访问的链接添加样式。 1 :visited 向已被访问的链接添加样式。 1 :first-child 向元素的第一个子元素添加样式。 2 :lang 向带有指定 lang 属性的元素添加样式 。 2
以上均可用于IE8.0以上及其他主流支持CSS3.0的浏览器，ie6.0好像只能看到css1的伪类效果；
第一个例子中有 :link :visited :hover 的使用
下面来看看在CSS2中出现的 :first-child :lang
:first-child 伪类向元素的第一个子元素添加样式。
view plainprint?
<div>
<p>These are the necessary steps:</p> <ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> </ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p> </div>
在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
设定：
view plainprint?
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
则第一个p元素样式为黑体 第一个子元素li为大写 同理可设其他的；
:lang 伪类向带有指定 lang 属性的元素添加样式。
:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型： view plainprint?
<html> <head>
<style type="text/css"> q:lang(no) {
quotes: "@@@@" "****" }
</style> </head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body>
</html>
PS: 所有主流浏览器支持:lang IE为8.0以上～
PS: 以上为伪类的基本用法，详情参见W3School
下面讲一些伪类的灵活运用的实例：
:hover 简单的放大效果：
view plainprint?
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css"> .larger { width:100px; padding:40px; overflow:auto; }
.larger a img { width:20px; height:20px;
border:none; }
.larger a:hover img { width:80px; height:80px; }
</style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>放大效果</title> </head> <body>
<h3>简单的放大效果：</h3> <div class="larger">
<a href="#9"><img src="4.jpg" alt="放大" title="放大" /></a> </div> </body> </html>
这样的使用可以减少使用js代码，也便于操作；
用css3伪类target制作tab选项卡效果： view plainprint?
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选项卡</title>
<style type="text/css"> .tab_box { clear:both; height:40px; }
.tab_box li { float:left;
border:1px solid #CCC; margin:0 5px 0 0; list-style:none; padding:5px; }
.tab_content { clear:both;
border:1px solid #CCC; padding:20px; margin:40px;
position: absolute; z-index:-1;
background:#0FF; width:300px; height:200px; }
#tab1:target, #tab2:target, #tab3:target {
z-index: 1; }
</style> </head>
<body>
<div class="tab_box"> <ul class="tabs">
<li><a href="#tab1">标签一</a></li> <li><a href="#tab2">标签二</a></li> <li><a href="#tab3">标签三</a></li> </ul>
<div id="tab1" class="tab_content"> 第一层内容</div>
<div id="tab2" class="tab_content"> 第二层内容</div>
<div id="tab3" class="tab_content"> 第三层内容</div> </div>
</body> </html>
等等～都是不错的使用！
二：伪元素的使用和方法：
用途同伪类，语法相似： view plainprint?
selector:pseudo-element {property:value;}
和CSS配合使用 view plainprint?
selector.class:pseudo-element {property:value;}
CSS3.0前的为元素有4种： view plainprint?
伪元素 作用 IE Firefox W3C :first-letter 将特殊的样式添加到文本的首字母 5 1 1 :first-line 将特殊的样式添加到文本的首行 5 1 1 :before 在某元素之前插入某些内容 1.5 2 :after 在某元素之后插入某些内 1.5 2
简单讲解一下：
:first-line 伪元素用于向文本的首行设置特殊样式。
:first-letter 用于文本首字母的特殊样式使用。 PS: 这俩个 伪元素只能用于块级元素。
伪元素和CSS类配合使用： view plainprint?
p.article:first-letter {
color: #FF0000; }
<p class="article">This is a paragraph in an article。</p>
多重为元素的使用： view plainprint?
p:first-letter {
color:#ff0000;
font-size:xx-large;//字体为决定大小 }
p:first-line {
color:#0000ff;
font-variant:small-caps; }
:before :after 为在 元素的内容之前和之后插入新内容
下面看一个首字母下沉的特效： view plainprint?
<!DOCTYPE HTML> <html> <head>
<style type="text/css"> p:first-letter {
color: #ff0000; font-size:xx-large }
</style> </head> <body> <p>
首字母下沉 : first-letter pseudo-element to add a special effect to the first letter of a text! </p> </body> </html>
ps:以上是CSS中的伪类和伪元素的相关知识，均可用在个主流浏览器上，IE8.0以上可以，8.0一下部分可以显示效果，如果灵活运用会制作很多不同的效果！！ 资料来自个人CSDN一篇博文！
因篇幅问题不能全部显示，请点此查看更多更全内容