CSS类会覆盖其他类(CSS class overwrites other)

我有HTML表格，其中应用了以下CSS：

.tbst th, td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 12px; overflow: hidden !important; line-height: 24px !important; }

和

.cmstb th, td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 14px; overflow: hidden !important; line-height: 24px !important; }

一个表使用.tbst类，另一个表使用.cmstb 。 但由于某种原因，第二个CSS应用于两个表，因此第二个CSS会覆盖第一个CSS中的样式。 我在这做错了什么？

I have HTML tables where the following CSS is applied:

.tbst th, td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 12px; overflow: hidden !important; line-height: 24px !important; }

and

.cmstb th, td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 14px; overflow: hidden !important; line-height: 24px !important; }

One table is using .tbst class, the other one .cmstb. But from some reason, the second CSS is applied to both tables, so the second CSS overwrite the style in first CSS. What am I doing wrong here?

最满意答案

你是正确的样式，但对于td ，样式是oerwritten，因为它不是特定于任何表。 使它特定于那些表

.tbst th, .tbst td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 12px; overflow: hidden !important; line-height: 24px !important; } and .cmstb th, .cmstb td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 14px; overflow: hidden !important; line-height: 24px !important; }

you are styling the th correctly, but for td, the style is oerwritten, because it is not specific to any table. make it specific to those tables

.tbst th, .tbst td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 12px; overflow: hidden !important; line-height: 24px !important; } and .cmstb th, .cmstb td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 14px; overflow: hidden !important; line-height: 24px !important; }CSS类会覆盖其他类(CSS class overwrites other)

我有HTML表格，其中应用了以下CSS：

.tbst th, td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 12px; overflow: hidden !important; line-height: 24px !important; }

和

.cmstb th, td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 14px; overflow: hidden !important; line-height: 24px !important; }

一个表使用.tbst类，另一个表使用.cmstb 。 但由于某种原因，第二个CSS应用于两个表，因此第二个CSS会覆盖第一个CSS中的样式。 我在这做错了什么？

I have HTML tables where the following CSS is applied:

.tbst th, td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 12px; overflow: hidden !important; line-height: 24px !important; }

and

.cmstb th, td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 14px; overflow: hidden !important; line-height: 24px !important; }

One table is using .tbst class, the other one .cmstb. But from some reason, the second CSS is applied to both tables, so the second CSS overwrite the style in first CSS. What am I doing wrong here?

最满意答案

你是正确的样式，但对于td ，样式是oerwritten，因为它不是特定于任何表。 使它特定于那些表

.tbst th, .tbst td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 12px; overflow: hidden !important; line-height: 24px !important; } and .cmstb th, .cmstb td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 14px; overflow: hidden !important; line-height: 24px !important; }

you are styling the th correctly, but for td, the style is oerwritten, because it is not specific to any table. make it specific to those tables

.tbst th, .tbst td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 12px; overflow: hidden !important; line-height: 24px !important; } and .cmstb th, .cmstb td { padding: 12px 3px !important; text-align: center !important; vertical-align: middle !important; border: 1px solid #ccc !important; font-size: 14px; overflow: hidden !important; line-height: 24px !important; }