CSS Nested Comments

问题:

Is there any way to nest comments in CSS?

For example, when I try to comment out the following two statements, the outer comment ends when it encounters the */ in the nested comment, leaving the rest of the first statement and second statement uncommented.

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

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

I run into this problem often when I want to try out a different styling technique that involves multiple statements.

I'm familiar with the CSS specification for comments and its rationale, but also know there's a workaround for nesting HTML comments and am hoping there's a similar hack for CSS.

Has anyone found a way to nest comments in CSS?

回答1:

CSS does not have a nestable comment syntax.

You could instead wrap the rules in something which does nest, but will not match anything, such as a non-existent media type:

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

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

This does have the caveat that it will not be obviously a comment (so it will not be removed by tools that remove comments), and will cause the browser to spend time on parsing it and finding that it doesn't match. However, neither of these should be a problem for temporary development use, which is the usual reason one would want to comment out a large chunk simply.

回答2:

CSS can't handle nested comments.

Using a CSS preprocessor like LESS or SASS, you can comment "silently" using

// this syntax

These won't show up in your final CSS.

回答3:

Well, yes, the same "workaround" you linked for HTML comments would work here. Change inner */ to * / (with a space). There's really no way of nesting block comments.

回答4:

Nested comments is not supported by CSS. You can't do that because you don't know how browsers will read it.

You can use LESS (an extension to CSS) that allows the one line comment //

回答5:

A couple years late to the party, but I seem to have stumbled on a way that seems to allow a kind of nested comment...although, as an admitted NON expert, there may be issues.

It appears, if you just place an extra, undecorated set of braces around some css, the css inside, and even any uncommented text, is not recognized, at least by Chrome 58.0.3029.110 (64-bit):

Original (from 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

With the brackets:

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

Kind of handy for dev work. The way I'm using this right now:

<style>

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

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

</style>