Escape syntax for CSS selectors in LESS

问题

The tilde (~) and quote method to escape CSS properties appears to work fine, however what do I do if I want a CSS selector to contain a number (or anything else I want LESS to ignore), e.g.

~"#content ul.2col" {
    float: left;
    width: 45%;
}

This just gives me a syntax error. Any ideas?

Update:

It turns out, starting a CSS indentifier (element names, classes, IDs in selectors..) with a digit or a hyphen followed by a digit is not allowed. See this question:

Which characters are valid in CSS class names/selectors?

回答1:

Class selectors starting with numbers don't validate as standard CSS, as mentioned in your edit. However, I'm not sure how LESS treats invalid selectors, but you can either:

• Change your class to a valid one that, say, starts with a letter; or

• If you must keep the initial digit, use either one of these hacks to make it "valid":

  • Use an attribute selector:

    #content ul[class~="2col"] {
        float: left;
        width: 45%;
    }
    

  • Escape the digit with a backslash:

    #content ul.\2col {
        float: left;
        width: 45%;
    }
    

来源：https://stackoverflow.com/questions/8290104/escape-syntax-for-css-selectors-in-less