无法在 Django 模板中重现 CSS 效果

Posted 2023-02-24

【中文标题】无法在 Django 模板中重现 CSS 效果

【英文标题】：Unable to reproduce CSS effect in Django template

【发布时间】：2021-02-23 02:18:02

【问题描述】：

我正在尝试重现此 W3Schools 示例显示的 悬停 效果 here。此示例将其 CSS 链接到 this url，而不是将其嵌入代码中。

我为页面中的元素提取 html 代码和所有 CSS 代码，如下所示。但是我的页面上没有呈现相同的效果。该样式表链接中是否还有其他东西可以控制渲染？我是 CSS 的菜鸟。

HTML

.w3-table,.w3-table-all  
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    display:table


.w3-table-all  
    border:1px solid #ccc


.w3-bordered tr,.w3-table-all tr 
    border-bottom:1px solid #ddd


.w3-table-all tr:nth-child(odd) 
    background-color:#fff

.w3-table-all tr:nth-child(even) 
    background-color:#f1f1f1


.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th 
    padding:8px 8px;
    display:table-cell;
    text-align:left;
    vertical-align:top


.w3-table-all th:first-child,
.w3-table-all td:first-child
    padding-left:16px


.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover 
    background-color:#ccc

<div class="w3-container">
  <h2>Hoverable Table</h2>
  <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>
    <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>
  </table>
</div>

更新：上面的 HTML 代码在下面的 Django 模板中编码，CSS 代码嵌入在 table.css 文件中。所有目录路径都已被验证为有效。模板中是否存在阻止 悬停 渲染的内容？

% extends "base.html" %
% load static %

% block title %Table Detail% endblock %

% block content %

  <link href="% static 'css/table.css' %" rel="stylesheet"/>

  % block sidebar %
    % include 'sidebar_view.html' %
  % endblock %

  % block page_header_content %
  <div class="page_header">
    <h1>Order for Table table_pk</h1>
  </div>
  % endblock %

  <div class="menu_row">
    <div class="column left_column" >
<!--      some stuff here-->

    </div>


    <div class="column right_column">
      <h2>Summary</h2>

      <br>

      <div class="w3-container">
        <h2>Hoverable Table</h2>

        <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>
          <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>
        </table>
      </div>

  </div>

  <div id="bottom-nav" class="bottom-nav">
<!--    some stuff here-->
  </div>

% endblock %

更新：我尝试将上述代码放入base.html，这是基本模板，它运行良好。基本模板和导致此不呈现的子模板有什么区别？

【问题讨论】：

在 sn-p 中运行良好，是什么问题？

@MinalChauhan 我不知道。我可以看到它在 sn-p 中工作。但它不在我的代码中（Django 模板）。

你读过managing static files上的文档吗？

@HenryWoody 我有。在添加 hover 代码之前，我已经验证了静态文件链接是否有效（即设置等都有效）。

只是悬停样式吗？其他样式有效吗？

【参考方案1】：

一个可能的问题是您的表格缺少tbody 标记，该标记用于悬停样式的选择器：.w3-hoverable 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>

【讨论】：

谢谢。这是行不通的。我尝试将我的原始代码复制到base.html，这是基本模板，它可以工作。我认为基本模板和扩展基本模板的子模板之间存在一些不同。

我发现了这个问题。 table.css 中有一些随机的 /* 评论标签导致它无法呈现。关闭这个。谢谢。