初级前端问题——为何无法覆盖浏览器自带样式

[fetich]

截取了部分代码

<form>
    ...
    <label for="password">密码：</label>
    <input type="password" id="password" name="pw">
    <br>
    <button>登陆</button>
</form>

* {
    margin: 0;
    padding: 0;
}
label {
    display: inline-block;
    width: 60px;
    height: 20px;
    text-align: left;
    font: 12px/20px SimSun;
}
input {
    box-sizing: border-box;
    width: 200px;
    height: 20px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
}

因为设置了 box-sizing: border-box;，同时有通配符选择器的规则，padding: 0，此时设置宽度、高度，以及边框，内容区大小应该为 198*18 ，但浏览器的结果为 Imgur，因为浏览器的这条内置规则 Imgur
为何我定义的规则没有覆盖浏览器的规则呢，后者的优先级难道不是最低的？
不知道是特例，抑或我的理解出现了纰漏，请各位前端前辈指点。

[digimoon]

没看懂什么问题，单独上面这些代码正常
css 有权重

[xxxyyy]

https://www.w3.org/TR/CSS2/cascade.html#specificity

[fetich]

@digimoon 就是在用通配符选择器重置浏览器样式后，为何第一张截图中上下內边距为 1 的问题

[xiaopc]

通配符*的权重低于浏览器定义的元素选择器。

[lslqtz]

body {
margin: 0;
padding: 0;
}
不知道是不是应该这样。。

[lslqtz]

个人认为还是单独对元素用 css 吧。。我没有其他方案，参考 4 楼

[66beta]

楼主了解下权重，而且*性能不太好

[suinia]

*明显没有 input 权重高。所以没有重置
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, th, td, input { margin: 0; padding: 0; }

[kingze1992]

行内样式选择器 > id 选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承样式 > 默认样式

[fetich]

@kingze1992 既然通配符选择器优先级（权重）大于默认样式，为何没有覆写默认样式呢？

[fetich]

@suinia
@66beta
@xiaopc 通配符选择器的权重是低了点（而且性能不好），但两者来源不同， author 里的规则权重整体高于 user agent ，所以应当能覆写浏览器的默认样式。
> By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style sheet.

[xiaopc]

@fetich ...没有复现这个问题 https://ooo.0o0.ooo/2016/08/04/57a306f360d13.png
Chrome 51.0.2704.103 m

[fetich]

@xiaopc 刚刚发现了原因，\u200b 这是什么鬼！！！
http://i.stack.imgur.com/uHOMs.png

[xiaopc]

@fetich 零宽度空格😄