html - 为什么 CSS 规则的存在会导致另一个不匹配？

Question

我尝试在 Chrome 中创建以下 HTML 文件：

<style>
br {
}

[required] {
  border-width: 3px;
  border-color: red;
}

</style>
<input required />

这是文件的完整内容。[required]规则不匹配并且仍然<input>没有样式。

如果空 br 规则被忽略，则文件读取：

<style>

[required] {
  border-width: 3px;
  border-color: red;
}

</style>
<input required />

它工作正常！

为什么<br>前一个规则的存在[required]会导致[required]不匹配？

谢谢。（它工作正常是 jsfiddle，你需要实际创建文件。）

score 2 · Accepted Answer

您的新行以某种方式无效。删除代码后，代码按预期执行。

我已经将问题追溯到br. 这是我在 vim 中得到的：

<style>
br {
}<200b>

[required] {
  border-width: 3px;
  border-color: red;
}

</style>
<input required />

显然<200b>是 Unicode 零宽度空间。我不熟悉这个角色，也不知道为什么它会出现在这个文件中。删除它可以解决问题。

score -1 · Accepted Answer

我认为 br 正在帮助欺骗浏览器 - 因为它们是更多的括号......

我想你错过了一些东西......

.required{} and
<input class="required">  


or 
#required{} and
<input id="required">

让小提琴！

2 回答 2