带有特殊字符的CSS类

Question

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

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

这个班级甚至有效吗？有没有办法使用类名？我想要:

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

当我用反斜杠转义〜时,允许我向页面注入(F12 - >元素 - >右上角的加号),但是显示灰色的css,这意味着页面中不存在该类.

该课程有效吗？如果是这样,我将如何使用它？

Answer 1

这个班级甚至有效吗？

这取决于你正在验证的内容.

profile[~redString]是一个有效的HTML类名称,例如通过验证器放置标记.

但是,.profile[~redString]它不是一个有效的CSS选择器,因为它~是你发现的一个特殊符号,它不在CSS解析器所期望的地方.当你逃脱它时,你会得到

.profile[\~redString]

这是一个有效的选择器,但具有完全不同的含义.它表示具有类名的元素profile,以及名为的属性~redString.它并不能代表一个类名,这正是一个元素profile[~redString].

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

.profile\[\~redString\]

或者,您可以使用属性选择器来使事情更清晰:

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

请注意~=这个CSS2.1属性选择器,它与类选择器的工作方式类似.

查看两个选择器:

: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>