CSS伪选择器

伪选择器

伪选择器是一种特殊的选择器，它分为伪类选择器和伪对象选择器2种。

1.伪类选择器

CSS提供了五种基本伪类选择器，分别对应HTML标记的五种状态。

伪类选择器	作用	应用对象
:hover	定义标记在鼠标悬停(划过)时的样式	所有显示标记
:link	定义标记在超链接状态下的样式	a标签
:focus	定义标记在获取焦点时的样式	a标签(IE浏览器不支持)
:visited	定义标记被访问过后的样式	a标签
:active	定义标记在选定时刻下的样式	a标签

举个荔枝：以下是5个a标签

  <a href="#" id="a1">链接1</a>
 	<a href="#" id="a2">链接2</a>
 	<a href="#" id="a3">链接3</a>
 	<a href="#" id="a4">链接4</a>
 	<a href="#" id="a5">链接5</a> 

加点CSS样式：

     a{
    		padding: 10px;
    		color:black; /*初始颜色全为黑色*/
    		font-weight: bold;
    	}
    	#a1:hover{
    		color:red; /*当鼠标悬停时链接1变成红色*/
    	}
    	#a2:link{
    		background-color: blue; /*给链接2添加蓝色的背景色*/
    	}
    	#a3:focus{
    		color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
    	}
    	#a4:visited{
    		color:green; /*被访问过后的链接4变为绿色*/
    	}
    	#a5:active{
    		background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
    	}

展示一下效果：

除了以上五种基本伪类选择器之外，CSS还支持诸如：”:first-child“首元素选择器和“:lang()”语言选择器等伪类选择器。

2.伪对象选择器

伪对象选择器根据对象内部的局部元素定义其样式。

伪对象选择器	作用
:first-letter	定义文本的第一个字符样式
:first-line	定义文本的首行样式
:before	定义对象之前内容的样式
:after	定义对象之后内容的样式

举个荔枝：以下是很多文本

<p>我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</p>

使用:before和:after样式后：

     p:before{
    		content:'我说：“';/*在文本前面追加内容*/
    		color:red;
    	}
    	p:after{
    		content:'。”我说完了！';/*在文本结尾追加内容*/
    		color:red;
    	}

展示一下效果：