html - 我想在HTML中替换表格行的底纹，但仅将其应用于多个表格之一

如果您希望页面上所有表的替代行底纹都相同，则以下代码会很好地工作：

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

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

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

但我只希望其中一个表具有此替代阴影。我以为我可以用“ .floatedTable”替换名称“ table”以将阴影应用到class ='floatedTable'的表上，但是它什么也没做。

我更愿意做的就是在里面找到一些要写的东西

最佳答案

如果您希望样式仅按类应用于特定表，则应将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;
  }
}