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

标签 html css css-selectors

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

通用 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/

相关文章:

html - 选择某种类型的最后一个 child

javascript - Canvas 游戏帧率下降

javascript - 在自定义下拉菜单中添加图像?

javascript - 将页面上的特定单词大写

css - input[type ='text' ] CSS 选择器不适用于默认类型的文本输入?

python - Django 单元测试 : CSS selectors to test HTML?

html - 如果值等于,则将 CSS 类添加到行元素

html - 为什么CSS文件被取消了?

javascript - 变换缩放后控制图像质量

jquery - 为什么用 jquery 删除类的速度不快?