为啥“<!--”注释掉样式规则，而“<!--”没有？
Posted
技术标签:
【中文标题】为啥“<!--”注释掉样式规则，而“<!--”没有？【英文标题】：Why does "<! --" comment out a style rule, but "<!--" does not?为什么“<!--”注释掉样式规则，而“<!--”没有？ 【发布时间】：2013-01-02 20:45:44 【问题描述】：放过我吧。我只是在学习 html。
根据http://www.w3.org/TR/html-markup/syntax.html#comments 和我见过的许多其他网站，例如http://www.w3schools.com/tags/tag_comment.asp
他们说 HTML 注释是 <!-- text -->，! 和下一个破折号之间没有空格。
然而，我在下面显示，只有当我写 <! -- test --> 时，里面的东西才会真正被忽略。注意<!和--之间添加的空格
这是 HTML 代码
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
<!-- td border: 1px solid gray; -->
</style>
</head>
<body>
<table>
<tr> <td> test </td> </tr>
</table>
</body>
</html>
现在在你运行它之前，表格是否应该有边框？
如果text/css中的东西真的被注释掉了，那么表格应该没有边框吧？但确实如此。我在 linux mint 14 和 firefox 18.0 下的 chrome 版本 24.0.1312.52 上试过这个
现在当我将行改为
<! -- td border: 1px solid gray; -->
现在注意额外的空间。然后表格按预期显示没有边框。当我实际删除整行时也会发生同样的情况：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table>
<tr> <td> test </td> </tr>
</table>
</body>
</html>
问题是：评论是<!-- text -->还是<! -- text -->？
【问题讨论】：
【参考方案1】：CSS 不接受 HTML <!-- comment here --> cmets。相反，CSS 使用/* comment */ 来注释行。试试吧。
【讨论】：
jsfiddle.net 是 web 开发人员的一个很好的资源，您可以在互联网上测试代码并在故障排除时将其提供给其他人，它非常有用，您应该经常使用它或找到一个同样有用的代码共享工具。 +1 @Ilan Biala，你成功了。为了清楚起见，@Nasser：HTML cmets 应该转义<!-- text -->，但是在发表评论时，您处于 CSS 块中，因此适用其他规则。
是的，html 的真正用途是构建文档，而 css 用于对其进行样式设置。它们真的更好分开，您应该考虑将内联样式更改为链接到 html 页面的外部样式表。
@IlanBiala 或 w3schools.com 就像这个例子中的 w3schools.com/code/tryit.asp?filename=G0QISZ7D46ZI【参考方案2】：
字符串<! -- 没有注释掉任何内容。相反，在 CSS 中这是一个语法错误，并且 CSS error processing 规则暗示在这种情况下所有样式表都被忽略了。
字符串<!-- 也不会开始注释，但根据CSS comment 规则，它（以及-->）在某些上下文中是允许和忽略（跳过）的。因此，样式表
<!-- td border: 1px solid gray; -->
被视为
border: 1px solid gray;
您可以使用 W3C CSS Validator 进行检查。第一种情况，带空格，报错，不报有效的CSS规则。第二种情况，不报错，规则显示为有效。
在 CSS 中，注释始终以 /* 开头并以 */ 结尾。
<!-- 和 --> 的特殊规则的原因是很久以前（我们说的是 Netscape 1 还在使用的时候），一些浏览器无法识别 style 元素全部。这意味着他们忽略了<style> 和</style> 标签并将它们之间的内容处理为普通的HTML 内容。这将导致样式表显示在此类浏览器的页面内。为了防止这种情况，为了“隐藏样式表”，样式表被包裹在 HTML 注释分隔符之间。旧浏览器会简单地忽略 style 元素的内容。但随后必须在 CSS 规范中添加一条特殊规则以允许使用分隔符。
这是古老的历史，但旧习惯盛行，甚至从其他人的代码中复制而不理解它们的含义。长期以来，没有理由“隐藏样式表”，而这个技巧现在已成为潜在风险（由于可能干扰 XHTML 规则或人们的混淆和输入错误）。
因此，切勿在 CSS 中使用 <!--（或 <! --）。
【讨论】：
我认为是早期的 Netscape（以及当时的其他浏览器），但不仅仅是 Netscape 1。【参考方案3】：我看到人们出于兼容性目的在 CSS 样式块中使用 <!-- -->。
在这种情况下，不支持 CSS 的旧浏览器会将其注释掉以避免错误。
<style type="text/css">
<!-- td border: 1px solid gray; -->
</style>
将被解释为
<style type="text/css">
</style>
不支持 CSS 的旧浏览器。这样，这些浏览器就可以避免潜在的错误。
然而，在现代浏览器中，CSS 样式块中的 <!-- --> 将被忽略。
<style type="text/css">
<!-- td border: 1px solid gray; -->
</style>
将被解释为
<style type="text/css">
td border: 1px solid gray;
</style>
通过支持 CSS 的浏览器。
【讨论】：
没有注释不会是错误，页面只会显示 td border: 1px solid gray; （这不是开发人员想要的，但这不是错误)。以上是关于为啥“<!--”注释掉样式规则，而“<!--”没有？的主要内容，如果未能解决你的问题，请参考以下文章
为啥在标准浏览器里<col>标签不能用了，是w3c废弃掉了<colgroup>系列标签吗？
c++ 函数模板的问题，请看代码，为啥去掉注释后，visual studio 2012会无法运行。
外部样式表用标签<link/>导入放在头部，为啥不需要<style></style>,而@import要放在 <style>里面？