关于样式覆盖的问题

本帖最后由 Mr_Free 于 2013-8-17 03:26 编辑

照着视频做的一个表格颜色间隔显示，我还加载了另一个之前写好的样式，然后再加载写好的表格行颜色间隔显示的方法。没想到
这个方法根本不起作用。也就是说外面加载的样式覆盖了我文件内的样式方法。为什么视频里面试可以显示的？？？求指点

下面是代码，表格网页

<html>
<head>
<title>
trcolor
</title>
<link rel="stylesheet" href="tab.css" />
<style type="text/css">
.one{
background-color:#33FFCC;
}
.two{
background-color:#FFFF66;
}
.over{
background-color:#090aad;
}
</style>
<script type="text/javascript">
//行颜色间隔显示
function trcolor1()
{
var tabNode = doc.getElementsByTagName("table")[0];
var trs = tabNode.rows;
for(var x=1;x<trs.length;x++)
{
if(x%2==1){
trs[x].className="one";
}
else{
trs[x].className="two";
//alert(trs[x].className);
}
}
}
function over(trNode)
{
trNode.className="over";
}
window.onload =trcolor1;
</script>
</head>
<body>
<table>
<tr>
<th>姓名 </th>
<th><a href ="javascript:void(0)" onclick="trcolor1()">年龄</th>
<th>地址</th>
</tr>
<tr>
<td onmouseover="over(this)">xwg</td>
<td>12</td>
<td>hz</td>
</tr>
<tr>
<td>sbh</td>
<td>9</td>
<td>sd</td>
</tr>
<tr>
<td>lyb</td>
<td>18</td>
<td>sd</td>
</tr>
<tr>
<td>dsda</td>
<td>32</td>
<td>cq</td>
</tr>
<tr>
<td>gougou</td>
<td>11</td>
<td>zhej</td>
</tr>
</table>
</body>
</html>

复制代码

外面加载的表格样式 tab.css

table{
border:#0066ff 1px solid;
width:60%;
}
table th{
border:#003399 1px solid;
background-color:#0099ff;
}
table td{
border:#003939 1px solid;
background-color:#0099ff;
}

复制代码

Mr_Free · Mr_Free

如果删掉
<link rel="stylesheet" href="tab.css" />
就可以正常显示。难道是我浏览器版本问题？

帐号		自动登录	找回密码
密码			加入黑马

关于样式覆盖的问题

1 个回复