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
所有select元素
所有锚元素

table.mytable input使用descendant combinator（空格）来构造表/输入关系。它仅将margin: 0应用于这些特定输入。

你的第二个选择器：

table.mytable select, input, a

将margin: 0应用于这些元素：

select元素是table.mytable
所有input元素
所有锚元素

因此，您的第一个选择器定位到一组特定的输入，而第二个选择器定位所有输入。

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

在second example中，第一和第二输入规则针对同一组（所有输入）并且在特异性方面具有相同的权重。第二条规则获胜，因为it is processed later in the cascade。由于这两个规则都是针对同一个群组，因此会覆盖第一个规则，从而导致您遇到的问题。

要仅定位表格中的输入，请尝试以下方法：

table.mytable select, 
table.mytable input,
a

Answer 2

CSS编写的方式并不适用于＆＃34;子集＆＃34;你可能希望如此。

首先放置选择，您现在无意中删除了所有输入的边距。

你现在拥有它的方式，如果我要把它分开就会看起来像这样：

input {
    margin: 0 0 2em;
}

table.mytable input {
    margin: 0;
}

select {
    margin: 0;
}

a {
    margin: 0;
}

为了让它以您想要的方式工作，您需要将table.mytable包含在每个＆＃34;子集＆＃34;你想要每个逗号之后。

input {
     margin: 0 0 2em;
}

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

Answer 3

试试这个。

＆＃13;

     function convertResponseToJob(response){
            var jobObj = new Job(response.id, response.clientId, response.book);
            jobObj.bookName = response.book.name;
            jobObj.submitDate = response.createDate;
            jobObj.priority = response.priority;
            jobObj.status = response.status;
            jobObj.sequence = response.seqOrder;
            return jobObj;
        }


        function Job(jobId, client, book) {
            this.jobId = jobId;
            this.client =  client;
            this.book = book;
            this.bookName = null;
            this.submitDate = null;
            this.priority = 2;
            this.sequence = 2;
            this.status = null;
        }

＆＃13;

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

＆＃13;

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

3 个答案: