使用 Haml 的 CSS ID 和嵌套标签答案

【问题标题】：CSS IDs and nesting tags with Haml使用 Haml 的 CSS ID 和嵌套标签
【发布时间】：2010-04-27 03:25:23
【问题描述】：

我的 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？

【问题讨论】：

标签： html css html-table haml

【解决方案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

【讨论】：