Question

我正在尝试在一个html页面上选择一个特定的表格，以便用css格式化。我不希望任何其他表，包括在同一页面上的其他表格以这种方式格式化。

我在标题内尝试了这个但是没有用 -

<style>
    #table3 {
        td,th { padding: 10px }
        tr:hover { background-color: #f5f5f5 }
    }
</style>

<table id="table3">
...
</table>

Answer 1

你不能像这样嵌套选择器。至少不是普通的CSS。

你想：

<style>
    #table3 td, #table3 th { padding: 10px }
    #table3 tr:hover { background-color: #f5f5f5 }
</style>

<table id="table3">
...
</table>

Answer 2

这不会起作用，因为这不是CSS的格式，尽管这个概念是正确的，你所做的格式是不正确的。

试试这个......

#table3 td, #table3 th {
    padding: 10px;
}

#table3 tr:hover {
    background-color: #f5f5f5;
}

但是，如果你想按照你的方式去做。您可以使用CSS编译器（例如less）来实现它，您可以在线查看较少的js，它使CSS轻量级并且更容易编写。

Answer 3

你写它的方式看起来更像SCSS。如果你需要简单的CSS，它应该是这样的：

<style>
    #table3 TD {
        padding: 10px;
    }
    #table3 TH {
        padding: 10px;
    }
    #table3 tr:hover {
        background-color: #f5f5f5;
    }
</style>

<table id="table3">
...
</table>

如何使用css格式化一个表

3 个答案: