风格特定表，而不会影响每个表

我已经为我的表之一以下CSS：风格特定表，而不会影响每个表

.customer-table tr, td, th { 
    border: 2px solid black; 
}

一切看起来真的很均匀美观。但是，当我这样写我的CSS时，我的网站上的所有表都受到此样式表的影响，并且它们具有2px宽的黑色边框。
然后我试图改变我的CSS是这样的：

table.customer-table { 
    border: 2px solid black; 
} 

tr.customer-table { 
    border: 2px solid black; 
} 

td.customer-table { 
    border: 2px solid black; 
} 

th.customer-table { 
    border: 2px solid black; 
}

并给每个表元素这个CSS类。现在桌子全都搞砸了。

为什么空间中的某些单元格现在有不同？

来源

2017-04-21 BoJack Horseman

你的HTML看起来像什么？ – blackandorangecat

值得注意的是，你们两套不同的款式并不相同。第一种样式'.customer-table tr，td，th'将仅适用于'customer_table'类和_all_''和''元素的''元素。你的第二组将假设_every_元素具有'customer-table'类，这是极不可能的。 –

第一条规则针对表中的每个'tr'，而不考虑类的'.customer-table'，每个'td'和'th'。第二套规则有所不同。这个目标的目标是''表''与类，'tr'与类，'td'与类，'th'与类。这两套不相同。 – blackandorangecat

我会做这样的事情。现在th,tr和td必须是一个.customer-table类的元素的后裔。

.customer-table th, 
.customer-table tr, 
.customer-table td { 
    border: 2px solid black; 
}

你的第一个例子针对性的任何元素与类.customer-table，任何th，任何tr和任何td。该th，tr和td没有被由.customer-table类“作用域”和自由地影响到页面上的任何元素一样。

就单元格的间距而言，我们需要看到完整的CSS和一些标记。根据您的屏幕截图，我可以看到您还没有共享的其他样式应用于您的表格元素。

来源

2017-04-21 13:41:58 hungerstar

非常感谢您的工作，并感谢您的解释！ –

风格特定表，而不会影响每个表

回答

相关问题