LESS 中 CSS 选择器的转义语法

Posted 2023-03-06

【中文标题】LESS 中 CSS 选择器的转义语法

【英文标题】：Escape syntax for CSS selectors in LESS

【发布时间】：2012-01-07 13:45:38

【问题描述】：

转义 CSS properties 的波浪号 (~) 和引号方法似乎可以正常工作，但是如果我希望 CSS 选择器包含数字（或我希望 LESS 包含的任何其他内容）该怎么办忽略），例如

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

这只是给我一个语法错误。有什么想法吗？

更新：

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

Which characters are valid in CSS class names/selectors?

【问题讨论】：

#content ul.2col 本身有什么作用？我不是 LESS 用户，所以我不太确定它如何处理以数字开头的类......（AFAIK 他们不验证为标准 CSS，所以我猜 LESS 在某种程度上更进一步）跨度>

是的，你是对的，如果它以数字开头是无效的。这个问题***.com/questions/448981/… 解释了什么是有效的 CSS 选择器名称——如果你通过 CSSlint.net 运行代码，如果数字在前，它会给出错误。对于它的价值，LESS 似乎并没有破坏任何代码。

我根据我们的观察发布了一个新答案。

【参考方案1】：

如您的编辑中所述，以数字开头的类选择器不会作为标准 CSS 进行验证。但是，我不确定 LESS 如何处理无效的选择器，但您可以：

将您的班级更改为以字母开头的有效班级；或

如果您必须保留初始数字，请使用以下任一技巧使其“有效”：

使用属性选择器：

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

用反斜杠转义数字：

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