li a:hover Css 在css文件中为什么无效？
Html代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/...
Html 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无题のページ</title>
<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<ul id="nav">
<li><a href="http://www.baidu.com/">baidu</a></li>
<li><a href="http://www.google.com/">谷歌美国</a></li>
<li><a href="http://www.google.cn/">谷歌</a></li>
<li><a href="http://www.hao123.com/">hao123</a></li>
<li><a href="http://www.163.com/">网易</a></li>
</ul>
</body>
</html>
Css文件内容：
#nav {width:860px; margin:0 auto;background:#ccc}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
最后的：#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}在Css中，页面表示为图1，鼠标移动时候没有特效。但是如果将
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}放入画面如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无题のページ</title>
<link href="test.css" type="text/css" rel="stylesheet" />
<style>
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.baidu.com/">baidu</a></li>
<li><a href="http://www.google.com/">谷歌美国</a></li>
<li><a href="http://www.google.cn/">谷歌</a></li>
<li><a href="http://www.hao123.com/">hao123</a></li>
<li><a href="http://www.163.com/">网易</a></li>
</ul>
</body>
</html>
画面效果就有了，如图2 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无题のページ</title>
<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<ul id="nav">
<li><a href="http://www.baidu.com/">baidu</a></li>
<li><a href="http://www.google.com/">谷歌美国</a></li>
<li><a href="http://www.google.cn/">谷歌</a></li>
<li><a href="http://www.hao123.com/">hao123</a></li>
<li><a href="http://www.163.com/">网易</a></li>
</ul>
</body>
</html>
Css文件内容：
#nav {width:860px; margin:0 auto;background:#ccc}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
最后的：#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}在Css中，页面表示为图1，鼠标移动时候没有特效。但是如果将
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}放入画面如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无题のページ</title>
<link href="test.css" type="text/css" rel="stylesheet" />
<style>
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.baidu.com/">baidu</a></li>
<li><a href="http://www.google.com/">谷歌美国</a></li>
<li><a href="http://www.google.cn/">谷歌</a></li>
<li><a href="http://www.hao123.com/">hao123</a></li>
<li><a href="http://www.163.com/">网易</a></li>
</ul>
</body>
</html>
画面效果就有了，如图2 展开
展开全部
分析：
如果是外部引用的CSS文件，请检查引用路径是否正确！
检查CSS代码文件中，一些符号是否多写或者少些，很多时候容易少些一个结束的“；”导致CSS代码加载不完！
关于 li a:hover 小案例：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
