Question

HTML

<form action="/login">
  ...
  <label for="password">Password</label>
  <input type="password" id="password" name="pw">
  <br>
  <button>Log in</button>
</form>

CSS

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

让我感到困惑的是input的填充。因为我在上面写了这些规则

/* 
  to reset margins and paddings in the user agent stylesheet, which is expensive, but I did it just for testing.
*/ 
* {
  margin: 0;
  padding: 0;
}

/*
  In my opinion, the following rules will result in a 198*18 content box with a 1px border surrounding it.
  While it didn't.
*/
  box-sizing: border-box;
  width: 200px;
  height: 20px;
  border: 1px solid #ddd;

结果是input有1px填充，顶部和底部。快照是问题的基础。通用选择器没有重置input元素的填充。原因是什么？期待着回复。

快照：[已删除]

大家好。抱歉给你带来不便。我终于找到了它的错误。它与我切断的代码片段无关。这是关键的快照。那到底是什么\u200b？ \u200b

老实说，我之前应该发现错误，因为通用选择器规则没有出现在右侧面板上。这是我的错。

Answer 1

您的选择器中有zero width space个字符。

这会使选择器无效，因此它与任何内容都不匹配，但在编辑器中很难看到。

为什么通用选择器不会重置用户代理样式表

1 个答案: