添加注释时 CSS 中断

Question

我试图向我的 HTML 样式添加注释，但我发现当我添加注释时，样式停止工作。

下面的效果很好。图标和文本显示为灰色。

<html lang="en">
    <head>
        <title>test</title>
        <link href="/gtd/media/css/font-awesome.css" rel="stylesheet">
    </head>
    <body>
        <style>

            .action-star {
                color: gray;
            }
        </style>
        <div class="container-fluid">
            <span class="action-star"><i class="icon-star icon-large"></i> Test Icon</span>
        </div><!--/container-->
    </body>
</html>

但是下面的方法不起作用。图标和文本显示为黑色。

<html lang="en">
    <head>
        <title>test</title>
        <link href="/gtd/media/css/font-awesome.css" rel="stylesheet">
    </head>
    <body>
        <style>
            <!-- Comment -->
            .action-star {
                color: gray;
            }
        </style>
        <div class="container-fluid">
            <span class="action-star"><i class="icon-star icon-large"></i> Test Icon</span>
        </div><!--/container-->
    </body>
</html>

我唯一添加的是这一行：

<!-- Comment -->

我一定错过了一些明显的东西。。。

Answer 1

要在 CSS 中进行注释，请使用/* Comment */，而不是 HTML<!-- Comment -->语法。这就是破坏 CSS 的原因。

提示一下，如果您使用的编辑器支持语法突出显示，通常它们会给注释指定特定的颜色。我见过的最常见的评论颜色是灰色、深蓝色或深绿色。当然，这仍然可能因编辑器而异，但颜色的变化可以很好地表明您正在使用正确的注释语法。

看看您<!--/container-->的代码示例中的注释如何变成灰色，但<!-- Comment -->事实并非如此。正如您现在所知，这并没有发生，因为您没有使用正确的语法。

干杯!