16

对我放轻松。我只是在学习 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 -->？

CSS 不接受 HTML<!-- comment here -->注释。相反，CSS 用于/* comment */注释行。试试那个。

4

3 回答 3

32

CSS 不接受 HTML<!-- comment here -->注释。相反，CSS 用于/* comment */注释行。试试那个。

于 2013-01-19T03:30:30.653 回答
21

该字符串<! --不会注释掉任何内容。相反，在 CSS 中它是一个语法错误，并且 CSS错误处理规则意味着在这种情况下所有样式表都被忽略。

该字符串<!--也不开始注释，但根据 CSS注释规则，它（以及-->）在某些上下文中被允许和忽略（跳过）。因此，样式表

<!-- td {border: 1px solid gray;} -->

被视为

{border: 1px solid gray;}

您可以使用 W3C CSS Validator进行检查。第一种情况，带空格，报错，不报有效CSS规则。第二种情况，没有报错，规则显示为有效。

在 CSS 中，注释总是以 . 开头/*和结尾*/。

<!--和 的特殊规则的原因 -->是很久以前（我们谈论的是 Netscape 1 仍在使用的时候），一些浏览器根本无法识别该style元素。这意味着他们忽略了<style>and</style>标记并处理它们之间的内容，就好像它是普通的 HTML 内容一样。这将导致样式表显示在此类浏览器的页面内。为了防止这种情况，为了“隐藏样式表”，样式表被包裹在 HTML 注释分隔符之间。旧的浏览器会简单地忽略元素的内容style。但是随后必须在 CSS 规范中添加一个特殊规则以允许分隔符。

这是古老的历史，但旧习惯盛行，甚至从其他人的代码中复制而不理解它们的含义。长期以来，没有理由“隐藏样式表”，而这个技巧现在已成为潜在的风险（由于可能干扰 XHTML 规则或人们的混淆和输入错误）。

所以，永远不要在 CSS 中使用<!--（或）。<! --

于 2013-01-19T04:56:06.760 回答
1

我见过人们<!-- -->出于兼容性目的使用 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 支持的浏览器。

于 2016-03-09T13:26:39.380 回答