風格特定表，而不會影響每個表

我已經爲我的表之一以下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

非常感謝您的工作，並感謝您的解釋！ –

風格特定表，而不會影響每個表

回答

相關問題