关于伪类的使用的一些心得以及星星评分效果的实现

         最近在做一个网站的主头部，需要在超链接文字默认状态，点击时，点击后，选择的链接的状态不一样，实现颜色改变等效果，所以想到了使用伪类来控制，并且还需要在点击后超链接所在的标签文字成亮色显示，并且标签背景与网页头部有一个颜色对比，让使用者知晓现在是在操作什么页面。

         如果有什么不对的地方望指出，希望本文能帮到你！

 1.先介绍一些伪类的基本知识：

a:link    表示在超链接默认样式（未进行任何操作以前的样式 ）比如a:link{color:red}

a:visited 表示超链接在点击之后的样式    

注意：如果写成a:link,a:visited{color:blue;} ,代表默认样式和点击后的样式相同，一种简写形式

a:hover 表示超链接在鼠标获得焦点时的状态 代表鼠标在超链接上时的样式

a:active 表示选中时的样式

hover 是 CSS2 开始支持的伪类，代表鼠标移动到链接上时的状态，IE4.0 开始支持。

<span style="font-size:14px;">a:link { color: green; }/* 未访问的链接 */
a:visited { color: blue; } /* 已访问的链接 */
a:hover { color: yellow; } /* 鼠标移动到链接上时 */
a:active { color: red; } /* 选中的链接 */</span>

注意：a:hover必须在a:link和a:visited之后才会有效a:active 必须在a:hover 之后才会有效

还有其他一些伪类：如下

p:first-line { color: red; }/* 第一行 */
p:first-letter { color: blue; }/* 第一个字符 */
p:first-child { color: yellow; }/* 第一个子元素 */
q:lang(jp) { quotes: xxx }/* 被赋予了某种语言的元素 */

2.伪类除了让超链接控制所以的a标签以外，还能对于单个a标签控制 比如

<div class="a1"><a href="~~~~~~~~~"></a><div>

<style type="type/css"> 

a.a1:link{color:red;} a .a1:visited{color:blue} a.a1:hover{color:yellow} a.a1:active{color:green}

</style>

3.伪类不仅可以用于控制超链接的状态，笔者在做项目的时候也试过用于控制其他标签，比如p标签，也是可以的

用法类是只是去掉a标签而已，例如：

<p class="p1"><span></span></p>
<style type="text/css">
.p1:link{} .p1:visited{} .p1:hover{} .p1:active{} //这样控制p标签的样式，其他应该都可以，比如div(我猜的，应该原理一样)但是可能这个不是那么的实用,总之知道可以这样用，也没什么坏处。
</style>
4.实现一个头部导航按钮
只需在页面加载时，执行如下的js
.divColor{
   background-color:red;
}
var x = window.location.href;//获取访问的网页路径
if(x=="127.0.01:8080.........."){
  如$(".div1").addClass("divColor");
}
Css代码:
.top_main{
	width:1060px;
	margin:0 auto;
}
.top_menu{
	float:left;height:30px;cursor: default;
}
/*  .top_main .top_menu li {
	font-size:14px;
	line-height:25px;
	list-style:none;
} */
.top_main .top_menu span {color:#61A700;
             line-height:50px;
             font-size:14px;}           
             
             
/*.top_menu a:hover{}*/
.top_main .top_bar{float:right;height:30px}
.top_main .top_bar li{float:left;
          line-height:25px; 
          color:#fff;
          font-weight:bold;}
.top_main .top_bar a{
	color:#c0c0c0;
           padding-top:17px;
           padding-bottom:20px;
           line-height:50px;
           font-size:14px;
           font-weight:bold;
           padding-left:12px;
           padding-right: 10px;
           }
.top_bar a.index:link,a.index :visited {
	color:#DCDCDC;
}
.top_bar a.index:hover,a.index:active{
	color:#fff;
}
.top_bar a.more:link,a.more :visited{
	color:#DCDCDC;
}
.top_bar a.more:hover,a.more:active{
	color:#fff;
}
.top_bar a.exit:link,a.exit:visited{
	color:#DCDCDC;
}
.top_bar a.exit:hover,a.exit:active{
	color:#fff;
}
jquery:代码
<script type="text/javascript">
	$(function() {
		var hrefName = window.location.href;/*获取当前加载的页面路径  */
		if ("http://127.0.0.1:8080/xxx/xxx/loadEvent.action" == hrefName) {
			$(".index").css("background", "black");
			$(".index").css("color", "white");
		}
		if ("http://127.0.0.1:8080/xxx/xxx/eventcl.jsp" == hrefName) {
			$(".more").css("background", "black");
			$(".more").css("color", "white");
		}
	});
</script>
页面DIv代码：
<div id="top">
	<div class="top_main">
		<ul class="top_menu">
			<span>休息休息</span>
		</ul>
		<ul class="top_bar">
			<a class="index" href="<%=basePath%>xxx/loadEvent.action"
				target="main">首页</a>
			<a class="more" href="<%=basePath%>xxx/eventcl.jsp" target="main">更多</a>
			<a class="exit" href="javascript:void(0);" οnclick="javascript:logout();">退出</a>
		</ul>
	</div>
</div>

5:下面说一个伪类的很牛的应用实现，目的是希望读者见识到其作用，让读者能感兴趣和专心去学习css，前端也非常重要的哦,一起成长嘛~我也是比较菜。

纯CSS实现星星评分效果（网购的时候买东西评价过的人都应该知道，其实可以很简单的实现啦）转自 http://www.zhangxinxu.com/wordpress/2013/08/%E7%BA%AFcss%E6%98%9F%E6%98%9F%E8%AF%84%E5%88%86%E4%BA%A4%E4%BA%92-%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8/

CSS代码：
/* 星星点灯照亮我的家门 */
.star_bg {
    width: 120px; height: 20px;
    background: url(star.png) repeat-x;
    position: relative;
    overflow: hidden;
}
.star {
    height: 100%; width: 24px;
    line-height: 6em;
    position: absolute;
    z-index: 3;
}
.star:hover {    
    background: url(star.png) repeat-x 0 -20px!important;
    left: 0; z-index: 2;
}
.star_1 { left: 0; }
.star_2 { left: 24px; }
.star_3 { left: 48px; }
.star_4 { left: 72px; }
.star_5 { left: 96px; }
.star_1:hover { width: 24px; }
.star_2:hover { width: 48px; }
.star_3:hover { width: 72px; }
.star_4:hover { width: 96px; }
.star_5:hover { width: 120px; }

label { 
    display: block; _display:inline;
    height: 100%; width: 100%;
    cursor: pointer;
}

/* 幕后的英雄，单选按钮 */
.score { position: absolute; clip: rect(0 0 0 0); }
.score:checked + .star {    
    background: url(star.png) repeat-x 0 -20px;
    left: 0; z-index: 1;
}
.score_1:checked ~ .star_1 { width: 24px; }
.score_2:checked ~ .star_2 { width: 48px; }
.score_3:checked ~ .star_3 { width: 72px; }
.score_4:checked ~ .star_4 { width: 96px; }
.score_5:checked ~ .star_5 { width: 120px; }

.star_bg:hover .star {  background-image: none; }

/* for IE6-IE8 JS 交互 */
.star_checked {    
    background: url(star.png) repeat-x 0 -20px;
    left: 0; z-index: 1;
}
HTML代码：
<div id="starBg" class="star_bg">                    
    <input type="radio" id="starScore1" class="score score_1" value="1" name="score">
    <a href="#starScore1" class="star star_1" title="差"><label for="starScore1">差</label></a>
    <input type="radio" id="starScore2" class="score score_2" value="2" name="score">
    <a href="#starScore2" class="star star_2" title="较差"><label for="starScore2">较差</label></a>
    <input type="radio" id="starScore3" class="score score_3" value="3" name="score">
    <a href="#starScore3" class="star star_3" title="普通"><label for="starScore3">普通</label></a>
    <input type="radio" id="starScore4" class="score score_4" value="4" name="score">
    <a href="#starScore4" class="star star_4" title="较好"><label for="starScore4">较好</label></a>
    <input type="radio" id="starScore5" class="score score_5" value="5" name="score">
    <a href="#5" class="star star_5" title="好"><label for="starScore5">好</label></a>
</div>