CSS 嵌套注释

Posted 2023-02-21

【中文标题】CSS 嵌套注释

【英文标题】：CSS Nested Comments

【发布时间】：2012-01-17 14:25:47

【问题描述】：

有没有办法在 CSS 中嵌套 cmets？

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

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

    #container .class 
        width: 25%;
    
*/

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

我熟悉用于 cmets 的 CSS specification 及其 rationale，但也知道有用于嵌套 html cmets 的 workaround，我希望 CSS 也有类似的技巧。

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

【问题讨论】：

我没有答案。但我总是将嵌套的结尾评论/* 拖到我父评论的结尾。希望大家使用支持拖动文本的IDE。 AFAIK 这是最简单的方法。

@Mohsen - 这是一个有用的技巧，谢谢。当有多个嵌套的 cmets 时仍然是一个问题，但至少这对某些人有帮助。

【参考方案1】：

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

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

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

    #container .class 
        width: 25%;
    

这确实有一个警告，它显然不是注释（因此它不会被删除 cmets 的工具删除），并且会导致浏览器花时间解析它并发现它不匹配。但是，对于临时开发使用，这些都不应该是问题，这也是人们想要简单地注释掉一大块的通常原因。

【讨论】：

非常... ...危险。 （因为一些浏览器对媒体查询块的解释很糟糕[ie]）

另外，缩小文件以减小文件大小，通常会剥离 cmets，但不会剥离这个。

@LaurenceCope 好的，好的，添加了注意事项！

开发/调试时使用的绝妙技巧。显然不应该直播。事实上，在 @media 标记之后插入 DISABLED 会禁用包含的样式

【参考方案2】：

CSS 无法处理嵌套的 cmets。

使用 LESS 或 SASS 之类的 CSS 预处理器，您可以使用“静默”注释

// this syntax

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

【参考方案3】：

嗯，是的，您为 HTML cmets 链接的相同“解决方法”在这里也可以使用。将内部*/ 更改为* /（带空格）。确实没有办法嵌套块 cmets。

【讨论】：

我明白您对解决方法的意思。不得不返回并删除临时的额外空间几乎与完全切换嵌套评论一样糟糕。

只需使用查找替换/在文本编辑器中设置宏。

正要回答但意识到它的相似之处。我所做的是在关闭 cmets */ 将 * 替换为 !/ 之类的其他内容。您可以使用查找和替换快速完成此操作（也许在新的文本编辑器窗口中查找和替换仅针对该代码而不是整个文档）。

【参考方案4】：

CSS 不支持嵌套 cmets。你不能这样做，因为你不知道浏览器会如何读取它。

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

【讨论】：

你不能这样做，因为你确实知道浏览器将如何读取它;)

【参考方案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>

【讨论】：

问题是我在你的浏览器中工作，甚至在所有当前存在的浏览器中，但在未来的浏览器中可能不会。在调试时它可能仍然对临时短期有用。