将类应用于未按预期工作的表

Question

我不是CSS专家，但我相信我的代码应该有效（？）。

我可以在不应用任何类的情况下使我的代码工作，但有时我需要限制某些表继承一个类。

JSFiddle正在运作，但未在<table>中申请。

在<table>中应用课程时，

JSFiddle无法正常工作。

Answer 1

由于@panther已经said，您有床选择器。

但是，如果您想对仅具有 table类的.responsiveTable使用该样式，那么您必须使用此选择器：

.responsiveTable,
.responsiveTable thead,
.responsiveTable tbody,
.responsiveTable tfoot,
.responsiveTable th,
.responsiveTable td,
.responsiveTable tr {
    display: block
} 

看起来非常诚实。所以我建议您使用 CSS预处理器，例如SASS，其中选择器如下所示：

.responsiveTable{
    thead, tbody, tfoot, th, td, tr{
        display: block
    }
}

哪会产生上述选择器。

Answer 2

在第3行有坏选择器。正确的是

.responsiveTable, thead, tbody, tfoot, th, td, tr 

由于逗号丢失且.responsiveTable table不存在，您的工作无效。只需table.responsiveTable。

Answer 3

在不工作的那个你忘记了css中的逗号：

 .responsiveTable,table,thead,tbody,tfoot,th,td,tr {
        display: block
    }