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

Question

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

<style>
br {
}​

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

</style>
<input required />

这是文件的完整内容。 <{1}}规则不匹配，[required]仍未设置样式。

如果省略空br规则，则文件显示为：

<input>

一切正常！

为什么在<style> [required] { border-width: 3px; border-color: red; } </style> <input required /> 之前存在<br>规则导致[required]不匹配？

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

Answer 1

您的新行无论如何都无效。代码在删除后按预期执行。

我已将问题追溯到br的结束括号之后。这是我在vim中得到的：

<style>
br {
}<200b>

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

</style>
<input required />

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

Answer 2

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

我认为你错过了什么......

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


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

让小提琴！