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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2829 天前的主题，其中的信息可能已经有所发展或是发生改变。

截取了部分代码

<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
为何我定义的规则没有覆盖浏览器的规则呢，后者的优先级难道不是最低的？
不知道是特例，抑或我的理解出现了纰漏，请各位前端前辈指点。

14 条回复 • 2016-08-04 19:05:59 +08:00

digimoon

2016-08-04 00:36:53 +08:00

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

xxxyyy

2016-08-04 00:41:06 +08:00 via Android

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

fetich

2016-08-04 01:02:05 +08:00

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

xiaopc

2016-08-04 06:21:33 +08:00 via Android

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

lslqtz

2016-08-04 07:34:00 +08:00

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

lslqtz

2016-08-04 07:34:34 +08:00

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

66beta

2016-08-04 08:37:11 +08:00

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

suinia

2016-08-04 09:31:02 +08:00

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

kingze1992

2016-08-04 12:25:01 +08:00

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

fetich

2016-08-04 16:05:05 +08:00

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

fetich

2016-08-04 16:09:59 +08:00

@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

2016-08-04 17:13:34 +08:00

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

fetich

2016-08-04 18:56:24 +08:00

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

xiaopc

2016-08-04 19:05:59 +08:00 via Android

@fetich 零宽度空格😄