html - 如何将样式限制为html的一部分

Question

<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>

我想将此应用于仅包含其他表的 html 页面中的单个表。我不想把这种风格放在那些桌子上。
我们真的可以按照我的要求做吗？
如果可以，请提供一些参考答案。

Answer 1

<style type="text/css">
table.myTable
{
border-collapse:collapse;
}
table.myTable, table.myTable td, table.myTable th
{
border:1px solid green;
}
table.myTable th
{
background-color:green;
color:white;
}
</style>

然后将该表更改为具有这样的类属性：

<table class="myTable">

Answer 2

您可以创建一个类并将其用于您希望样式处理的表

table.myStyles
{
border-collapse:collapse;
}
table.myStyles, .myStyles td, .myStyles th
{
border:1px solid green;
}
.myStyles th
{
background-color:green;
color:white;
}

然后为你的桌子

<table class="myStyles">....</table>

Answer 3

您将需要执行以下操作之一：

• 修改表格的 html 以提供tableandID或 a class，然后将您的 CSS 修改为table.foo
• 仅当该表是容器内的第一个或最后一个表时才使用:first-child,:last-child

Answer 4

这很容易做到。只需给表格一个 id，并在您的 css 代码中使用“#”来引用该想法。

Answer 5

<style type="text/css">
  .green-table {
    border-collapse:collapse;
  }
  .green-table td, .green-table th {
    border:1px solid green;
  }
  .green-table th {
    background-color:green;
    color:white;
  }
</style>

<table class="green-table">
    ...
</table>