LESS文件中具有百分比字符的选择器出错

Question

我有一个ID包含百分比符号的div,如下所示:

<div id="foo%bar">
    stuff
</div>

我不能避免这种情况,是一个我无法改变的div所以我需要处理那个:(

我试图使用LESS到达该元素,但是当我尝试编译LESS文件时,在包含百分比的行中出现错误:

要编译LESS文件,我正在使用凹槽(https://github.com/sindresorhus/grunt-recess),一个GruntJS插件.如果有人知道任何其他工具来编译LESS文件以避免此错误,我将很乐意更改为使用它.

提前致谢!

Answer 1

虽然这是一个有效的(HTML5)ID,但它不是有效的CSS选择器.来自Selectors Level 3文档(W3C)

在CSS中,标识符(包括选择器中的元素名称,类和ID)只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0和更高,加上连字符( - )和下划线( _); 它们不能以数字,两个连字符或连字符后跟数字开头.标识符还可以包含转义字符和任何ISO 10646字符作为数字代码(请参阅下一项).例如,标识符"B&W？" 可以写成"B \&W \？" 或"B\26 W\3F".

您可以使用反斜杠字符来转义选择器中的百分号并使其有效:

#foo\%bar {
    color:red
}

小提琴