css 点击后样式

/* 字体链接样式 */

td.firstLevelMenuClass a:link {color: #3E8BAC text-decoration: none}      /* 未访问的链接 */

td.firstLevelMenuClass a:visited {color: #FFFFFF text-decoration: none}    /* 已访问的链接 */

td.firstLevelMenuClass a:hover {color: #FFFFFF}    /* 鼠标移动到链接上 */

td.firstLevelMenuClass a:active {color: #FFFFFF}   /* 选定的链接 */

/* 鼠标事件背景样式 */

td.firstLevelMenuClass:hover {background-image: url(../../Public/img/menu_first_down_bg.gif) }  /* 鼠标移动到链接上 */

td.<span style="color:#cc0000">firstLevelMenuClassHover</span>{background-image: url(../../Public/img/menu_first_down_bg.gif) }

td.firstLevelMenuClass{background-image: url(../../Public/img/head_menu_center.gif) }

JS:

[javascript] view plain copy

/*

* 取得对应类和标签的HTML元素

* clsName:给定类名

* tagName：给定的HTML元素，如果为任意 tagName='*'

*

*/

function getElementsByClassName(clsName, tagName) {

var ClassElements = []

selElements = document.getElementsByTagName(tagName)

for (var i = 0 i < selElements.length i++) {

if (selElements[i].className == clsName) {

ClassElements[ClassElements.length] = selElements[i]

}

}

return ClassElements

}

//通过改变元素class名达到间接改变背景样式

function onFirstMenuChangeBg(e) {

//先清除已经改变的元素背景样式

var getElements = getElementsByClassName('<span style="color:#cc0000">firstLevelMenuClassHover</span>', 'td')

for (var i = 0 i < getElements.length i++) {

getElements[i].className = "firstLevelMenuClass"

}

//设置鼠标点击元素背景样式

e.className = "firstLevelMenuClassHover"

}

HTML:

[html] view plain copy

<td class="firstLevelMenuClass" id="firstLevelMenu0"  onclick="onFirstMenuChangeBg(this)" >

<a href='#'>测试0</a>

</td>

<td class="firstLevelMenuClass" id="firstLevelMenu1"  onclick="onFirstMenuChangeBg(this)" >

<a href='#'>测试1</a>

</td>

<td class="firstLevelMenuClass" id="firstLevelMenu2"  onclick="onFirstMenuChangeBg(this)" >

<a href='#'>测试2</a>

</td>

我们在点击超链接的时候，会发现

这四个状态，链接的文本会发生不一样的状态，这样的效果就是用CSS的伪类选择器来实现。

正确的CSS顺序应该是

Why?

因为这四个CSS的优先级是一样的，所有后者会覆盖前者。

从实现的步骤来分析，就应该是这样排列才对。

用户的 *** 作步骤是

1. 还没有点击链接

那么只有 a:link 这一条样式生效，用户看到的是没有点击的样式。

2. 鼠标移上去悬浮在链接上

那么 a: link 和 a: hover 这两条生效，由于 a: hover 在后面，所以样式3覆盖了样式1，显示的是鼠标移上去悬浮在链接上这个样式

3. 鼠标按了下去

那么 a:link 、 a:hover 和 a:active 这三条生效， a:active 覆盖了前两者，显示出来的就是鼠标点击时候的样式。

4. 点击完发生链接之后

那么 a: visited 这一条永久生效，显示出来的就是链接后的样式。

总之，必须是，

---