css - 如何将 CSS 应用于特定的 asp.net 表？

Question

我从一个包含许多表格样式的网站下载了一个 .css 样式表。我想将该 .css 样式表应用于特定的 asp.net 表。所以在aspx中我有，

          <asp:Table cssClass="downloadedCss">
          </asp:Table>

在我下载的 css 样式表中，它有很多东西，例如 ..

           table {}
           caption{}
           td, th  {}
           tr {}
           thead th, tfoot th {}
           tbody td a  {}
           tbody td a:visited  {}
           tbody td a:hover {}
           tbody th a  {}
           tbody th a:hover {}
           tbody td+td+td+td a {}
           tbody td+td+td+td a:visited  {}
           tbody th, tbody td {}
           tfoot td {}
           tbody tr:hover  {}

如何使所有这些 css 属性仅适用于表（下载的 Css 类）

Answer 1

ASP.NET 表将呈现为 HTML 表。

您的示例将呈现如下：

<table class="downloadedCss">
</table>

因此，您当前的 CSS 规则将全部适用于该表。如果您希望这些样式仅应用于此表，请在 CSS 规则中指定类名。

       table.downloadedCss {}
       table.downloadedCss caption{}
       table.downloadedCss td, table.downloadedCss th  {}
       table.downloadedCss tr {}
       table.downloadedCss thead th, table.downloadedCss tfoot th {}
       table.downloadedCss tbody td a  {}
       table.downloadedCss tbody td a:visited  {}
       table.downloadedCss tbody td a:hover {}
       table.downloadedCss tbody th a  {}
       table.downloadedCss tbody th a:hover {}
       table.downloadedCss tbody td+td+td+td a {}
       table.downloadedCss tbody td+td+td+td a:visited  {}
       table.downloadedCss tbody th, table.downloadedCss tbody td {}
       table.downloadedCss tfoot td {}
       table.downloadedCss tbody tr:hover  {}

Answer 2

如果你改变

table {}

到

table.downloadedCss {}

然后在所有其他样式之前添加它，那么只会将这些样式应用于该表。例如

table.downloadedCss caption {}
table.downloadedCss td, th {}

但是，我可能会删除很多 CSS，因为我怀疑您是否需要所有这些。

Answer 3

<table CssClass="pnlstudentDetails">
        <tr>
            <td>
            </td>
        </tr>
    </table>

To apply Css for all the td elements under the specific table or panel or div try this code .
 .pnlstudentDetails td
        {
            height: 40px;
            vertical-align: middle;
            text-align: left;
            margin-top: 10px;
        }