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

【问题标题】：Why would the existence of a CSS rule cause another not to match?为什么 CSS 规则的存在会导致另一个不匹配？
【发布时间】：2012-08-16 07:12:55
【问题描述】：

我尝试在 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 />

效果很好！

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

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

【问题讨论】：

【解决方案1】：

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

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

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


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

让我们来拉小提琴吧！

【讨论】：

他不使用名为“required”的class或id，而是使用property“required”w3schools.com/html5/att_input_required.asp
哎呀——没听懂——谢谢——我现在明白了。从我的角度来看似乎工作正常。也许只是忘记了一个括号>？

【解决方案2】：

你的新行不知何故无效。删除代码后，代码按预期执行。

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

<style>
br {
}<200b>

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

</style>
<input required />

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

【讨论】：