css - 有类和无类的不同结果

Question

我有以下 HTML 标记：

<form method="get" action="#" class="test">
  <input type="search"/><input type="submit" value="Search"/>
</form> 

如果我使用，我会得到两个不同的结果：

form { input { box-sizing: border-box; } }

见http://www.codepen.io/anon/pen/ksuJc

或者

form.test { input { box-sizing: border-box; } }

见http://www.codepen.io/anon/pen/zmgjF

看到按钮的右边距了吗？不？尝试使用 Chrome、IE 和 Safari ...

只有在 Firefox 中没有区别......

我错过了什么？

谢谢你，米格尔

Answer 1

在一个例子中，你有这个：

form.test input {
    box-sizing: border-box;
    display: inline-block;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

在另一个例子中

form input {
    box-sizing: border-box;
    display: inline-block;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

在第二个版本input[type="search"]中具有更多的特异性，因此它覆盖了在form input

在第一个版本form.test input中具有更多的特异性，因此具有优先权。