html - 具有特殊字符的 CSS 类

Question

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

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

这个类是否有效？有没有办法使用类名？我要:

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

当我用反斜杠转义 ~ 时，chrome 允许我将它注入(inject)(F12 -> 元素 -> 右上角的加号)到页面，但以灰色显示 css，这意味着该类不存在于页面。

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

Answer 1

Is this class even valid?

这取决于您要验证的对象。

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>