带有特殊字符的 CSS 类答案

【问题标题】：CSS classes with special characters带有特殊字符的 CSS 类
【发布时间】：2015-11-23 05:47:47
【问题描述】：

我有一个 WebApp，我需要在其中使用 CSS 文件来操作某些元素。 CSS 类包含方括号和其他特殊字符。至少chrome似乎不直接接受它们。

<div class="profileElement profile[~redString]">123</div>

这个类甚至有效吗？有没有办法使用类名？我要：

.profile[~redString]{
    color: red; }

当我使用反斜杠 chrome 转义 ~ 时，我可以将其注入（F12 -> Elements -> 右上角的加号）到页面，但将 css 显示为灰色，这意味着该类不存在于页面。

该类有效吗？如果是这样，我将如何使用它？

【问题讨论】：

【解决方案1】：

这个类甚至有效吗？

这取决于您验证的对象。

profile[~redString] 是一个有效的 HTML 类名，例如通过 validator 放置标记。

但是，.profile[~redString] 不是一个有效的 CSS 选择器，因为正如您所发现的，~ 是一个特殊符号，并且它不在 CSS 解析器所期望的位置。当你逃脱它时，你会得到

.profile[\~redString]

这是一个有效的选择器，但含义完全不同。它表示一个类名为profile 的元素，以及一个名为~redString 的属性。它确实不代表一个类名正好是profile[~redString]的元素。

要匹配此元素，您还需要转义方括号。这将导致整个字符流被视为单个标识符：

.profile\[\~redString\]

或者，您可以使用属性选择器来使事情更整洁：

[class~="profile[~redString]"]

请注意此CSS2.1 attribute selector 中的~=，其工作方式类似于类选择器。

查看两个选择器的实际操作：

:first-child.profile\[\~redString\],
:last-child[class~="profile[~redString]"] {
  color: red;
}

<div>
  <div class="profileElement profile[~redString]">123</div>
  <div class="profileElement profile[~redString]">456</div>
</div>

【讨论】：

也许更干净，但绝对不是更清晰！我随时都会使用转义字符。
@Mr Lister：一旦你通过语法高亮显示它确实会变得更清晰...我现在刚刚完成。
完美，适合我的目的。我喜欢 [class=""]-Syntax，因为它使我能够将类名复制/粘贴到我的 CSS 文件中，而无需在类名中添加字符。
好吧，好吧，你赢了。说@Tim，你会用<div class="some&quot;classname">这样的类名做什么？
@Mr Lister：.some\"classname（不幸的是，confuses JSFiddle's syntax highlighter）或[class~='some"classname']。同时使用单引号和双引号...您必须至少转义其中之一。