Question

有没有办法在CSS中嵌套注释？

例如，当我尝试注释掉以下两个语句时，外部注释在遇到嵌套注释中的* /时结束，而第一个语句的其余部分和第二个语句都没有注释。

/*
    #container {
        width: 90%;     /* nested comment here */
        margin: 0 auto;
    }

    #container .class {
        width: 25%;
    }
*/

当我想尝试一种涉及多个语句的不同样式技术时，我经常遇到这个问题。

我熟悉用于评论的CSS specification及其rationale，但也知道有一个workaround用于嵌套HTML评论，我希望有类似的CSS攻击。< / p>

有没有人找到在CSS中嵌套评论的方法？

Answer 1

CSS没有可嵌套的注释语法。

您可以将规则包装在嵌套的内容中，但不会匹配任何内容，例如不存在的媒体类型：

@media DISABLED {
    #container {
        width: 90%;     /* nested comment here */
        margin: 0 auto;
    }

    #container .class {
        width: 25%;
    }
}

这有一点需要注意，它不会显然是一个注释（所以它不会被删除注释的工具删除），并会导致浏览器花时间解析它并发现它不匹配。但是，这些都不应该成为临时开发使用的问题，这是人们想要简单地注释掉大块的常见原因。

Answer 2

嗯，是的，你为HTML评论链接的“解决方法”在这里可以使用。将内部*/更改为* /（带空格）。实际上没有办法嵌套块注释。

Answer 3

CSS无法处理嵌套的注释。

使用像LESS或SASS这样的CSS预处理器，您可以使用

“静默地”发表评论

// this syntax

这些不会出现在你的最终CSS中。

Answer 4

CSS不支持嵌套注释。你不能这样做，因为你不知道浏览器将如何阅读它。

您可以使用LESS（CSS的扩展名），允许一行注释//

Answer 5

晚会结束了几年，但我似乎偶然发现了一种似乎允许一种嵌套评论的方式......尽管如此，作为非专业人士，可能存在问题。

看起来，如果你只是在一些css周围放置一个额外的，未修饰的大括号，内部的css，甚至任何未注释的文本，都无法识别，至少通过Chrome 58.0.3029.110（64位）：

原文（来自an unrelated question and answer）：

html, body, .container {
    height: 100%;
}
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

Fiddle

括号：

html, body, .container {
    height: 100%;
}
{ extra braces...
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}
/* ...act as comment? */ }

Fiddle

开发工作有点方便。我现在正在使用它的方式：

<style>

/* Use this */
    .class1 {
        /* stuff */
    }

{ /* But not this */
    .class1 {
        /* other stuff */
    }
}

</style>

CSS嵌套注释

5 个答案: