CSS - 伪类 ¶

作者：KK
发表日期：2016.1.30

其实之前讲到的鼠标划过样式的那个关键词hover是一个叫做伪类的知识点,我不太会用专业术语解释伪类,简单地说你可以这么认为:它以选择器:伪类名称{样式...}的语法结构来描述了一个选择器所指定的元素在"某一状态/形式下的样式",比如"鼠标划过状态下"的样式,其实这个不能说是状态,你暂且这么理解就已经足够,以后有机会你再深入研究,平时用到的伪类基本就是hover,其它很少会用到,下面拿几个其它伪类来讲讲吧

first-child:这个伪类描述了选择器所定位的元素中的第一个元素,比如

<body>
<style type="text/css">
ul li:first-child{background:yellow; color:blue; font-weight:bold;}
</style>
<ul>
	<li>11111</li>
	<li>22222</li>
	<li>33333</li>
</ul>
</body>

这就是说要让ul里面的li中的一个元素(自然就是第1个li)上样式

before和after:这两个伪类一般出现在reset里面,平时极少用,它们的作用就是在指定元素的前面或后面添加一些东西,例子:

<style type="text/css">
a:before{content:"焦点新闻:"}  /*在所有新闻链接前都添加这4个文字,反之,after那个伪类就是在后面添加文字*/
</style>
<a href="">某地方车祸伤亡数...</a><br/>
<a href="">某地方贪官落马...</a><br/>

link和visited这两个伪类用于控制超级链接在点击前和点击后的样子,例子:

<style type="text/css">
.link1:link{color:red;}
.link1:visited{color:blue;}

	
.link2{color:red;}

.link3:visited{font-weight:bold;}
</style>
<a href="http://www.kkh86.com/it/index.html" target="_blank" class="link1">点我前是红色字,点我后是蓝色字</a><br/>
<a href="http://www.kkh86.com/it/index.html" target="_blank" class="link2">就算不用link伪类,我也可以默认红色字</a><br/>
<a href="http://www.kkh86.com/it/index.html" target="_blank" class="link3">没加粗,点我后就加粗!</a>

如果想重来,只需要把链接里的网址换掉就可以,比如后面加多个数字1,2,3之类的就可以恢复了