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 td或者只是td，我在哪里放类选择器（在所有内容之前，在中间，用或没有桌子等）。

我的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之间的孩子（例如tbody/thead/tfoot）与班级pricing和此规则

.pricing table tr td:last-child

查找包含parent类的元素的表。这些肯定是三个不同的规则

在选择器中指定元素/类的需要取决于您的规则必须具体多少，如果您必须覆盖以前的规则。作为一个拇指规则，我建议你开始定义更简单（更短）的规则，并增加它们的特异性，直到不应用样式。

Answer 2

table .pricing

表示选择器适用于任何表格中包含.pricing INSIDE类的元素。

table.pricing (no space)

表示所选元素是一个类为.pricing的表。

令人困惑的表CSS

2 个答案: