html - 令人困惑的表格 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; }

我只是想弄清楚一个规则，什么时候放table，什么时候不放table，是必须写tr td还是只写td，类选择器放在哪里(一切之前，中间，with或没有 table 等)。

我的 HTML 非常简单，就是这样:

<table class="pricing">
  <tr> <th>Codes </th> </tr>
  <tr> <td>The Constitution of the Russian Federation (adopted at National Voting on December 12, 1993)</td> <td>£34.00</td> </tr>

Answer 1

如果这个选择器有效

table.pricing tr td:last-child

这意味着你的表有一个pricing类，所以很明显

table .pricing tr td:last-child

无法工作(因为您正在寻找 table 和 tr 之间的 child (例如 tbody/thead/tfoot)，类 定价和这条规则

.pricing table tr td:last-child 

查找包含在具有 parent 类的元素中的表格。这绝对是三个不同的规则

是否需要在您的选择器中指定一个元素/类，取决于您的规则必须有多具体，您是否必须覆盖以前的规则。作为经验法则，我建议您开始定义更简单(更短)的规则并增加它们的特异性，直到不应用该样式。