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 docs (W3C)

  

在CSS中，标识符（包括元素名称，类和ID）   选择器）只能包含字符[a-zA-Z0-9]和ISO 10646   字符U + 00A0和更高，加上连字符（ - ）和下划线   （_）;它们不能以数字，两个连字符或连字符开头   一个数字。标识符还可以包含转义字符和任何字符   ISO 10646字符作为数字代码（参见下一项）。例如，   标识符＆＃34; B＆amp; W？＆＃34;可以写成＆＃34; B \＆amp; W \？＆＃34;或＆＃34; B \ 26 W \ 3F＆＃34;。

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

#foo\%bar {
    color:red
}

Fiddle

Answer 2

它不是有效的选择器;如果你看看JSFiddle这将不会被设计样式。相反，使用属性选择器，这样你就可以获得预期的结果，并且你的LESS将被编译。

[id*="bar"][id*="baz"] {
    color:red
}

工作小提琴：http://jsfiddle.net/Gd2FT/2/

最好的选择是重构和删除百分比，但我认为这在短期内就足够了。

编辑：或者，更简单更好：

[id="bar%baz"] {
    color:red
}