更改以逗号分隔的选择器的顺序会破坏样式

Question

如果更改子选择器中元素的顺序，则会影响类外部的元素。

通用HTML：

<input type='text'>
<hr>
<table class="mytable">
  <tbody> 
    <tr><td><input type='text'></td></tr>
    <tr><td><input type='text'></td></tr>
    <tr><td><input type='text'></td></tr>
  </tbody>
</table>

这个CSS可以正常工作（ jsfiddle ）：

input {
  margin: 0 0 2em;
}
table.mytable input,select,a {
  margin: 0;
}

下面的CSS只需将<select>首先放在元素的子列表中（ jsfiddle ），就可以使表格之前的第一个输入失去边距。 那就是在不应该为第一个输入框激活（选择）mytable类的情况。

input {
  margin: 0 0 2em;
}
table.mytable select,input,a {
  margin: 0;
}

我在Chrome和Firefox中都对此进行了测试，它们的行为方式相同。 那是一个错误吗？ 或有人可以解释我所缺少的吗？

Answer 1

第一个选择器：

table.mytable input, select, a

针对以下元素：

• 是table.mytable后代的table.mytable
• 所有select元素
• 所有锚元素

table.mytable input使用后代组合器 （空格）构造表/输入关系。 它仅将margin: 0应用于那些特定的输入。

您的第二个选择器：

table.mytable select, input, a 

将margin: 0应用于以下元素：

• select table.mytable后代元素
• 所有input元素
• 所有锚元素

因此，第一个选择器将特定的输入组作为目标，而第二个选择器将所有输入作为目标。

在第一个示例中 ，第一个输入规则以所有输入为目标。 但是由于较高的特异性 ，第二条输入规则会覆盖第一条规则。 第一条规则最终匹配所有输入，第二条规则所针对的输入除外。

在第二个示例中 ，第一和第二输入规则针对同一组（所有输入），并且在特异性方面具有相同的权重。 第二条规则获胜，因为它会在级联中稍后处理 。 因为两个规则都针对同一组，所以第一个规则将被覆盖，从而导致您遇到问题。

要仅将表中的输入作为目标，请尝试以下操作：

table.mytable select, 
table.mytable input,
a 

Answer 2

CSS的编写方式在您希望的“子集”中不起作用。

通过将select放在第一位，您现在无意中从所有输入中删除了边距。

如果我将其分解，那么您现在拥有的方式将如下所示：

input {
    margin: 0 0 2em;
}

table.mytable input {
    margin: 0;
}

select {
    margin: 0;
}

a {
    margin: 0;
}

为了使其按您希望的方式工作，您需要在每个逗号后包括table.mytable以及所需的每个“子集”。

input {
     margin: 0 0 2em;
}

table.mytable select,
table.mytable input,
table.mytable a {
    margin: 0;
}

Answer 3

尝试这个。

 input { margin: 0 0 2em; } table.mytable select, table.mytable input, table.mytable a { margin: 0; } 

 <input type='text'> <hr> <table class="mytable"> <tbody> <tr><td><input type='text'></td></tr> <tr><td><input type='text'></td></tr> <tr><td><input type='text'></td></tr> </tbody> </table>