Html 无法在Django模板中复制CSS效果

我试图重现这个示例显示的悬停效果。此示例将其CSS链接到，而不是将其嵌入到代码中

我提取页面中元素的HTML代码和所有CSS代码，如下所示。但同样的效果不会在我的页面上呈现。样式表链接中是否还有其他东西控制渲染？我是CSS的一个noob

HTML

.w3表、.w3表全部{
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
显示：表格
}
.w3表格所有{
边框：1px实心#ccc
}
.w3带边框的tr、.w3表格所有tr{
边框底部：1px实心#ddd
}
.w3表所有tr:n个子项（奇数）{
背景色：#fff
}
.w3表所有tr:n子项（偶数）{
背景色：#f1f1
}
.w3表td、.w3表th、.w3表全部td、.w3表全部th{
填充：8px 8px；
显示：表格单元格；
文本对齐：左对齐；
垂直对齐：顶部
}
.w3表所有第th项：第一个孩子，
.w3表所有td：第一个孩子{
左侧填充：16px
}
.w3可悬停tbody tr:hover，.w3-ul.w3-可悬停li:hover{
背景色：#ccc
}

悬停桌
名字
姓
要点
吉尔
史密斯
50
前夕
杰克逊
94
亚当
约翰逊
67

一个可能的问题是您的表缺少

tbody

标记，该标记用于悬停样式的选择器：

。w3可悬停tbody tr:hover

。浏览器似乎会在丢失时为您添加此项，但无论如何，最好将其包含在内，这可能是错误的根源

只需更新您的HTML（Django模板），在

thead

之后以及所有

tr

元素周围添加

tbody

标记，如下所示：

<table class="w3-table-all w3-hoverable">
  <thead>
    <tr class="w3-light-grey">
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody> <!-- here -->
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
  </tbody> <!-- and here -->
</table>

名字
姓
要点
吉尔
史密斯
50
前夕
杰克逊
94
亚当
约翰逊
67

snippet运行良好，问题出在哪里？@MinalChauhan我不知道。我可以在代码片段中看到它在工作。但我的代码（Django模板）中没有。你读过上面的文档吗？@HenryWoody我读过。在添加悬停代码之前，我已经验证了静态文件链接是否有效（即设置等所有功能）。这只是悬停样式吗？其他款式行吗？谢谢。它不起作用。我尝试将我的原始代码复制到

base.html

，这是基本模板，它可以工作。我认为基本模板和扩展基本模板的子模板之间有一些不同。我解决了这个问题。在

table.css

中有一些随机的

/*

注释标记导致它无法呈现。关闭这个。谢谢