黑马程序员技术交流社区

标题: 关于样式覆盖的问题 [打印本页]
作者: Mr_Free    时间: 2013-8-17 03:22
标题: 关于样式覆盖的问题
本帖最后由 Mr_Free 于 2013-8-17 03:26 编辑

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

下面是代码，表格网页
  1. <html>
  2. <head>
  3. <title>
  4. trcolor
  5. </title>
  6. <link rel="stylesheet" href="tab.css" />
  7. <style type="text/css">
  8. .one{
  9.                 background-color:#33FFCC;
  10.         }
  11. .two{
  12.                 background-color:#FFFF66;
  13.         }
  14. .over{
  15.                 background-color:#090aad;
  16. }

  18. </style>


  21. <script type="text/javascript">
  22. //行颜色间隔显示
  23. function trcolor1()
  24. {
  25.         var tabNode = doc.getElementsByTagName("table")[0];
  26.         var trs = tabNode.rows;
  27.         
  28.         for(var x=1;x<trs.length;x++)
  29.         {
  30.                 if(x%2==1){
  31.                   trs[x].className="one";
  32.                
  33.                 }
  34.                 else{
  35.                         trs[x].className="two";
  36.                         
  37.                         //alert(trs[x].className);
  38.                 }
  39.         }
  40. }
  41. function over(trNode)
  42. {
  43.         trNode.className="over";
  44.         }
  45.                 window.onload =trcolor1;
  46.                
  47. </script>

  49. </head>
  50. <body>
  51. <table>

  53. <tr>
  54. <th>姓名 </th>
  55. <th><a href ="javascript:void(0)" onclick="trcolor1()">年龄</th>
  56. <th>地址</th>
  57. </tr>
  58. <tr>
  59. <td onmouseover="over(this)">xwg</td>
  60. <td>12</td>
  61. <td>hz</td>
  62. </tr>
  63. <tr>
  64. <td>sbh</td>
  65. <td>9</td>
  66. <td>sd</td>
  67. </tr>
  68. <tr>
  69. <td>lyb</td>
  70. <td>18</td>
  71. <td>sd</td>
  72. </tr>
  73. <tr>
  74. <td>dsda</td>
  75. <td>32</td>
  76. <td>cq</td>
  77. </tr>
  78. <tr>
  79. <td>gougou</td>
  80. <td>11</td>
  81. <td>zhej</td>
  82. </tr>
  83. </table>
  84. </body>
  85. </html>
复制代码
外面加载的表格样式  tab.css
  1. table{
  2.         border:#0066ff 1px solid;
  3.         width:60%;
  4. }
  5. table th{
  6.         border:#003399 1px solid;
  7.         background-color:#0099ff;
  8. }
  9. table td{
  10.         border:#003939 1px solid;
  11.         background-color:#0099ff;
  12. }
复制代码
作者: Mr_Free    时间: 2013-8-17 03:24
如果删掉
<link rel="stylesheet" href="tab.css" />
就可以正常显示。难道是我浏览器版本问题？



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2