如何仅使用 css 格式化一个表

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;
}

但是，如果您想按照您的方式进行操作。你可以使用诸如less之类的CSS编译器来做到这一点，您可以将其在线查看为更少的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>