HTML class 全局属性

试一试

<p>Narrator: This is the beginning of the play.</p>

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>

<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>

<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>

.note {
  font-style: italic;
  font-weight: bold;
}

.editorial {
  background: rgb(255 0 0 / 0.25);
  padding: 10px;
}

.editorial::before {
  content: "Editor: ";
}

每个类值可以包含任何 Unicode 字符（当然，ASCII 空白符除外）。但是，当在 CSS 选择器中使用时，无论是通过 JavaScript 使用 Document.querySelector() 等 API，还是在 CSS 样式表中，类属性值都必须是有效的 CSS 标识符。这意味着，如果一个类属性值不是有效的 CSS 标识符（例如，my?class 或 1234），则在使用它进行选择时，必须先对其进行转义，可以使用 CSS.escape() 方法，或者手动转义。

因此，建议开发者为类属性选择无需转义的有效 CSS 标识符作为值。