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具有更多特异性，因此它优先。

班级和无班级的不同结果

1 个答案: