混淆表CSS

Question

我描述一個表中的CSS元素，它包含此行：

.pricing tr td:last-child { text-align: right; } 

這使得最後一列文本右對齊。定價類是我試圖編輯的表的類。 我還沒有真正能夠找出或找到任何地方在CSS中列出表格標籤的規則。如果我把：

table .pricing tr td:last-child { text-align: right; } 

或

.pricing table tr td:last-child { text-align: right; } 

，這一行也不行。但是，如果我把：

table.pricing tr td:last-child { text-align: right; } 

然後它確實工作。

是什麼使得它更加混亂，是我編輯主題的CSS，它有這些行：

table caption { font-weight: bold; text-align: left; padding: 4px 6px; border: 1px solid #ddd; border-bottom: 0; background: #ffd53c url(img/pattern.png); } 

table th, table td { padding-left: 6px; padding-right: 6px; line-height: 21px; border: 1px solid #ddd; background-color: #fff; text-align: left; vertical-align: middle; } 

table th, table tfoot td { font-weight: bold; background: #eee url(img/pattern.png); } 

table tfoot a { text-decoration: none; } 

table .alternate td { background-color: #fafafa; } 

table.large th,table.large td { padding: 12px 8px; } 

我只是想弄清楚一個規則，當把表，何時不放表，是否必須寫tr tr或td，在哪裏放置類選擇器（在所有之前，中間，有無表等）。

Answer 1

如果選擇工作

table.pricing tr td:last-child 

這意味着你的表中有一個pricing類，所以這是很明顯的

table .pricing tr td:last-child 

不能工作（因爲你table之間尋找兒童和tr（例如tbody/thead/tfoot）與類別pricing和此規則

.pricing table tr td:last-child 

尋找包含在具有parent類的元素中的表格。這些絕對是三條不同的規則

需要在選擇器中指定元素/類取決於您的規則必須具體多少，如果必須重寫先前的規則。作爲一個拇指規則，我建議你開始定義更簡單（更短）的規則，並增加它們的特異性，直到樣式不適用。

Answer 2

table .pricing 

指示選擇器適用於具有.pricing INSIDE類的元素。

table.pricing (no space) 

指示所選元素是具有.pricing類的表。