CSS 伪类与伪元素详解
CSS的元素选择器除了根据id（#）、class（.）、属性（[]）选取元素以外，还有很重要的一类，就是根据元素的特殊状态来选取元素。它们就是伪类和伪元素。跟id选择器、类选择器、属性选择器以及派生选择器等这些从HTML文档层次结构（DOM树）中获取元素不同的是，伪类和伪元素是预定义的、独立于文档元素的。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。当然，伪类和伪元素的表示形式也使用“:”（英文冒号）与其它选择器相区分。
1.1伪类
伪类选择元素基于的是当前元素处于的状态。状态是动态的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
1.1.1用于超连接的伪类
1、语法
:link
伪类将应用于未被访问过（未点击过和鼠标未经过）的链接，与:visited互斥。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
:active
伪类将应用于被激活的元素（在鼠标点击与释放之间发生的事件）时的样式。
:visited
伪类将应用于已经被访问过的链接，与:link互斥。
2、应用实例
(一)某一个伪类的应用
1>通过对全站超链接样式化方法。
a{
color:#333;
text-decoration:none;
}
a:hover{
color:#CC3300;
text-decoration:underline;
}
2>通过链接内设置类控制超链接样式css方法。
<ahref="网址"class="yangshi">CSS</a>
CSS代码
a.yangshi{
color:#333;
text-decoration:none;
}
a.yangshi:hover{
color:#CC3300;
text-decoration:underline;
}
通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式。
3>通过对应超链接外的父级的css类的css样式来控制超链接的样式。
<divclass="yangshi"><ahref="网址">CSS</a></div>
CSS代码
.yangshia{
color:#333;
text-decoration:none;
}
.yangshia:hover{
color:#CC3300;
text-decoration:underline;
}
注意：a.yangshi与.yangshia的样式css代码区别。
(二)、四个同时使用
<ahref=“网址”>CSS</a>
CSS代码
a:link{
color:#FF0000;
}
a:visited{
color:#00FF00;
}
a:hover{
color:#FF00FF;
}
a:active{
color:#0000FF;
}
注意：在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。
1.1.2其他伪类
:focus
伪类将应用于拥有键盘输入焦点的元素。
:first-child
伪类将应用于元素在页面中第一次出现的时候。
:lang
伪类向带有带有以指定值开头的lang属性的所有元素添加样式。
注意：该值必须是整个单词，即可是单独的，比如lang="en"，也可后跟连接符，比如lang="en-us"。
1.2.1应用实例
HTML代码
<body>
<div>
<textarea></textarea>
</div>
<div>
<textarea></textarea>
</div>
<divlang=“zh”>
<textarea></textarea>
</div>
</body>
CSS代码
div:first-child{
background:#0F0;
}
textarea:focus{
background:#F00;
}
div:lang(zh){
background:#00F;
}
1.2伪元素
1.2.1概述
伪元素是对元素中的特定内容进行操作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
1.2.2语法
:first-letter
伪元素的样式将应用于元素文本的第一个字（母）。
:first-line
伪元素的样式将应用于元素文本的第一行。
:before
在元素内容的最前面添加新内容。
:after
在元素内容的最后面添加新内容。
1.2.3CSScontent属性
此特性目前已被大部分的浏览器支持：Firefox1.5+,Safari3.5+,IE8+,Opera9.2+,Chrome0.2+。另外，目前Opera9.5+和Safari4已经支持所有元素的content属性，而不仅仅是:before和:after伪元素。
注意：IE6/7对CSScontent属性不支持。
1、基本应用——生成内容
与:before以及:after伪元素组合使用生成文本内容。CSScontent属性值除了使用文本值外，还可以使用标签的一些属性值，方法是attr()。
例1：
h2:before{
content:"我是额外文字！";
}
例2：
<aclass="content"href="http://www.zhangxinxu.com/">此标签的href值是：</a>
a.content:after{
content:attr(href);
}
注意：当使用attr()获取标签属性名的时候，千万不要添加引号。
2、扩展应用
1>使用计数器创建编号
例：
HTML代码
<body>
<div>
<ul>
<li><imgsrc=＂地址＂width=＂128＂height=＂96＂/></li>
<li><imgsrc=＂地址＂width=＂128＂height=＂96＂/></li>
</ul>
</div>
</body>
CSS代码
ul{
list-style-type:none;
counter-reset:sectioncounter;
}
ulli:before{
content:"thebeauty"counter(sectioncounter)":";
counter-increment:sectioncounter;
}
2>用图片替换文字
例：
HTML代码
<div>
<p>欢迎来到上海，欢迎参观世博会！</p>
</div>
CSS代码
p{
content:url(地址);
width:10%;
height:10%;
}
备注：本文介绍的只是经常用到的一些伪类和伪元素。
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT