如果我更改子选择器中元素的顺序,它会影响类外的元素。
通用 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 中对此进行了测试,它们的行为方式相同。那么这是一个错误吗?或者有人可以解释我错过了什么吗?
最佳答案
第一个选择器:
table.mytable input, select, a
针对以下元素:
- 作为
table.mytable
后代的输入 - 所有
选择
元素 - 所有 anchor 元素
table.mytable 输入
使用 descendant combinator (空间)来构建表/输入关系。它仅将 margin: 0
应用于那些特定的输入。
你的第二个选择器:
table.mytable select, input, a
将 margin: 0
应用于这些元素:
选择
table.mytable
后代的元素
- 所有
input
元素 - 所有 anchor 元素
因此,您的第一个选择器针对一组特定的输入,而第二个选择器针对所有 输入。
在first example ,第一个输入规则针对所有输入。但是由于 higher specificity,第二个输入规则覆盖了第一个规则。 .第一条规则最终匹配所有输入,但第二条规则所针对的输入除外。
在second example ,第一个和第二个输入规则针对同一组(所有输入)并且在特异性方面具有相同的权重。第二条规则获胜,因为 it is processed later in the cascade .因为这两个规则都针对同一个组,所以第一个规则被覆盖,从而导致您遇到的问题。
要仅针对表中的输入,试试这个:
table.mytable select,
table.mytable input,
a
关于html - 更改以逗号分隔的选择器的顺序会破坏样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40267428/