html - 使用 Haml 的 CSS ID 和嵌套标签

Question

我的 CSS 文件中有以下代码，但它不起作用。

#home table th td {
  border:1px solid black;
  padding:2px;
}

在我的 index.haml 文件中，我有:

%div{:id => "home"}
  %table
    %tr
      %th
        Your Account
    %tr
      %td
        #{link_to 'View my profile', @profile}
        %br
        #{link_to 'Edit my profile', edit_profile_path(@profile)}
        %br
        #{link_to 'Logout', :controller => 'admin', :action => 'logout'}

创建此页面源代码(我知道，多余。但只是为了彻底):

<div id='home'>
  <table>
    <tr>
      <th>
        Your Account
      </th>
    </tr>
    <tr>
      <td>
        <a href="/profiles/7">View my profile</a>
        <br />
        <a href="/profiles/7/edit">Edit my profile</a>
        <br />
        <a href="/admin/logout">Logout</a>
      </td>
    </tr>
  </table>
</div>

但是当我在浏览器中查看文件时边框没有显示...

当我将表格标签分开时

#home table {
      border:1px solid black;
      padding:2px;
    }

#home th {
      border:1px solid black;
      padding:2px;
    }

#home td {
      border:1px solid black;
      padding:2px;
    }

看起来不错。

以前的 CSS 代码与这个版本相比有什么问题？我应该如何正确地将这些标签折叠成一个 ID？

Answer 1

以下是您可以使用的问题

对于标题:

#home table tr th {
  border:1px solid black;
  padding:2px;
}

对于表格单元格:

#home table tr td {
  border:1px solid black;
  padding:2px;
}

更多详情请查看:http://www.w3schools.com/css/default.asp