3

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

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

我无法避免这种情况，这是一个我无法更改的 div，所以我需要处理它:(

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

错误

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

提前致谢！

4

2 回答 2

7

虽然这是一个有效的 (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
}

小提琴

于 2014-02-03T00:14:14.993 回答
1

它不是一个有效的选择器；如果您查看 JSFiddle，则不会对其进行样式设置。相反，使用属性选择器，这样您将获得预期的结果并且您的 LESS 将被编译。

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

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

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

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

[id="bar%baz"] {
    color:red
}
于 2014-02-02T23:13:48.113 回答