html - 我想在 HTML 中交替对表行进行着色，但只将它应用于多个表中的一个

Question

如果您希望页面上的所有表格具有相同的交替行底纹，则以下代码效果很好:

<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>

但我只希望我的一张 table 有这种交替的阴影。我以为我可以将名称“table”替换为“.floatedTable”，以将阴影应用于带有 class='floatedTable' 的表，但它没有做任何事情。

我更喜欢做的方式就是找一些东西写在里面

Answer 1

如果你希望样式只适用于某个类的某个表，你应该将 TH 嵌套在该类定义中:

<style>
    .floatedTable{
        border-collapse: collapse;
        width: 100%;
    }

    .floatedTable th, .floatedTable td {
        text-align: left;
        padding: 8px;
    }

    .floatedTable tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>

当你开始学习 SCSS 时，你会这样做:

.floatedTable {
  border-collapse: collapse;
  width: 100%;
  th, td {
    text-align: left;
    padding: 8px;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
}