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

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

通用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只需将

放在元素子列表（）的第一位，就可以使表前面的第一个输入失去边距。也就是说，第一个输入框的mytable类在不应该被激活时被激活（选中）

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

我在Chrome和Firefox上都测试了这个功能，它们的功能都是一样的。这是一个bug吗？或者有人能解释一下我遗漏了什么吗？

第一个选择器：

table.mytable input, select, a

table.mytable select, input, a 

针对以下要素：

• 是

  table.mytable

• 所有

  选择
  元素

• 所有锚定元件

table.mytable input

使用（空格）来构造表/输入关系。它仅对那些特定的输入应用

margin:0

您的第二个选择器：

table.mytable input, select, a

table.mytable select, input, a 

将

margin:0

应用于以下元素：

• 选择
  表.mytable的后代元素

• 所有

  输入
  元素

• 所有锚定元件

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

在中，第一个输入规则以所有输入为目标。但是，第二条输入规则会由于以下原因而覆盖第一条规则。第一条规则最终匹配所有输入，第二条规则所针对的输入除外

在中，第一个和第二个输入规则针对相同的组（所有输入），并且在特异性方面具有相同的权重。第二条规则获胜是因为。因为两个规则都针对同一个组，所以会覆盖第一个规则，从而导致出现问题

要仅针对表中的输入，请尝试以下操作：

table.mytable select, 
table.mytable input,
a 

第一个选择器：

table.mytable input, select, a

table.mytable select, input, a 

针对以下要素：

• 是

  table.mytable

• 所有

  选择
  元素

• 所有锚定元件

table.mytable input

使用（空格）来构造表/输入关系。它仅对那些特定的输入应用

margin:0

您的第二个选择器：

table.mytable input, select, a

table.mytable select, input, a 

将

margin:0

应用于以下元素：

• 选择
  表.mytable的后代元素

• 所有

  输入
  元素

• 所有锚定元件

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

在中，第一个输入规则以所有输入为目标。但是，第二条输入规则会由于以下原因而覆盖第一条规则。第一条规则最终匹配所有输入，第二条规则所针对的输入除外

在中，第一个和第二个输入规则针对相同的组（所有输入），并且在特异性方面具有相同的权重。第二条规则获胜是因为。因为两个规则都针对同一个组，所以会覆盖第一个规则，从而导致出现问题

要仅针对表中的输入，请尝试以下操作：

table.mytable select, 
table.mytable input,
a 

试试这个

输入{
边缘：0.02米；
}
table.mytable选择，table.mytable输入，table.mytable a{
保证金：0；
}

试试这个

输入{
边缘：0.02米；
}
table.mytable选择，table.mytable输入，table.mytable a{
保证金：0；
}

CSS的编写方式并不像您希望的那样在“子集”中工作

通过将“选择”放在第一位，您现在无意中删除了所有输入的边距

你现在的样子，如果我把它拆开，会是这样的：

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;
}

---

CSS的编写方式并不像您希望的那样在“子集”中工作

通过将“选择”放在第一位，您现在无意中删除了所有输入的边距

你现在的样子，如果我把它拆开，会是这样的：

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;
}