LESS中CSS选择器的转义语法 [英] Escape syntax for CSS selectors in LESS

问题描述

使用波浪号(〜)和quote方法可以逃避CSS properties ，但是，如果我想让CSS选择器包含数字(或其他我想让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?

更新:

事实证明，不允许以数字或连字符后跟数字开头的CSS标识符(元素名称，类，选择器中的ID ..).看到这个问题:

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:

哪些字符在CSS类名称/选择器中有效?

推荐答案

以数字开头的类选择器不能作为标准CSS进行验证.但是，我不确定LESS如何对待无效的选择器，但是您可以:

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%;
}

这篇关于LESS中CSS选择器的转义语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！