CSS 变量名中允许使用句点吗？

例如，我可以有一个名为如下的 css 变量：--Button.onHover?

请注意，CSS 变量与 CSS 选择器不同（我必须解释这一点，因为有人将其标记为重复项）。这是模块中的示例superfly-css-变量-颜色 https://github.com/superfly-css/superfly-css-variables-colors/blob/master/src/main/css/index.css:

      :root {
        --percentage-lightest:  91%;
        --percentage-lighter:   78%;
        --percentage-light:     65%;
        --percentage-median:    52%;
        --percentage-dark:      39%;
        --percentage-darker:    26%;
        --percentage-darkest:   13%;

        --percentage-low: 25%;
        --percentage-high:  50%;

        --percentage-link-hover: 25%;
      }

在 CSS 中，属性名称是 ident，并且 ident 不能包含句点。每CSS 规范 https://www.w3.org/TR/CSS22/syndata.html#value-def-identifier，它们可能只包含字符[a-zA-Z0-9], 连字符-, 下划线_、非 ASCII 字符以及其他字符的转义版本。因此，属性名称不能包含未转义的句点，也不能包含custom属性名称。

所以，--Button.onHover不是有效的自定义属性名称（或“CSS 变量”名称，或任何您想要的名称）。

如果你想代表--Button.onHover作为有效的 CSS 变量名称，您必须转义句点，这可以通过在前面添加反斜杠来完成\在它之前，或者在一般情况下通过运行它CSS.escape在 JavaScript 中：

console.log(CSS.escape('--Button.onHover')) // --Button\.onHover