css:为什么点击链接后,所有链接颜色都变了

html-css08

css:为什么点击链接后,所有链接颜色都变了,第1张

Css超链接样式的各属性的顺序不能颠倒,这个顺序非常重要。

css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active,即

a:link 链接平常的状态

a:visited 链接被访问过之后

a:hover 鼠标放到链接上的时候

a:active 链接被按下的时候

以下为点过链接后,链接字体变为红色:

a:link { color:#dd3409text-decoration:nonefont-size:13px}/* 超链接的样式 */

a:visited { color:#9f301dtext-decoration:none}

a:visited:hover { color:#9f301dtext-decoration:underline}

a:hover { color:#dd3409text-decoration:underline}

a:active { color:#ff3300text-decoration:underline}

百度那些是不同页面,只要分别改动每个导航栏即可,

------------------------------------

同一页面:

<style type="text/css">

a:link,a:visited{ color:#000}

a.current:link{ color: #F00}

a.current:visited{ color: #c00}

</style>

<script>var oldid = '1'

function change(id)

{

eval("document.getElementById('menu"+oldid+"').className=''")

eval("document.getElementById('menu"+id+"').className='current'")

oldid = id

}

</script>

<a href="#" id="menu1" onclick="change(1)">Ŀ1</a>

<a href="#" id="menu2" onclick="change(2)">Ŀ2</a>

<a href="#" id="menu3" onclick="change(3)">Ŀ3</a>

---------------------------------------------------------

不同页面,共用一个头部,可以通过页面路径来判断栏目。

<style type="text/css">

a:link,a:visited{ color:#000}

a.current:link{ color: #F00}

a.current:visited{ color: #c00}

</style>

<script language="javascript" type="text/javascript">

var str=location.href

var oldid=1

if(str.indexOf("index.html")>=0) //当路径中含有index.html,设oldid=2

oldid=2

if(str.indexOf("/news/")>=0)

oldid=3

if(str.indexOf("/projects.asp")>=0)

oldid=3

eval("document.getElementById('menu"+oldid+"').className='current'")

</script>

<a href="#" id="menu1">1111</a>

<a href="#" id="menu2">2222</a>

<a href="#" id="menu3">3333</a>