混淆表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类的表。