LESS 中 CSS 选择器的转义语法

发布于 2024-12-18 10:19:20 字数 458 浏览 6 评论 0原文

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

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

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

更新：

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

CSS 类名称/选择器中哪些字符有效？< /a>

原文

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?

Update:

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:

Which characters are valid in CSS class names/selectors?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七月上 2024-12-25 10:19:20

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

将您的类更改为有效的类，例如以字母开头的类；或

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

使用属性选择器：

#content ul[class~="2col"] {
    浮动：向左；
    宽度：45%；
}

用反斜杠转义数字：

#content ul.\2col {
    浮动：向左；
    宽度：45%；
}

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

回复收藏 0 原文

~没有更多了~