CSS 数据类型

CSS 数据类型 <ident> 表示用作标识符的任意字符串。

语法

数据类型 <custom-ident> 的语法与 CSS 标识符类似,例如属性名称。唯一的区别是它区分大小写。它可以包含一个或多个字符,其中字符可以是以下字符之一:

  • 任何字母字符(A 到 Z 或 a 到 z),

  • 任何十进制数字(0 到 9),

  • 连字符 (-),

  • 下划线 (_),

  • 转义字符(前面有反斜杠 \),

  • 反斜杠 (\) 格式的 Unicode 字符,后跟一到六位十六进制数字。它代表 Unicode 代码点。

注意:由于 <custom-ident> 的语法区分大小写,因此标识符如 ID1 、id1、Id1 和 iD1 都是不同的标识符。

/* 有效标识符 */
test1 /* 字母数字字符和数字的混合 */
test-sample /* 字母数字字符和带有连字符 (-) 的数字的混合 */
-test1 /* 破折号/连字符后跟字母数字字符 */
--test1 /* 自定义属性,如标识符 */
_test1 /* 下划线后跟字母数字字符 */
\11 test /* 一个 Unicode 字符,后跟一系列字母数字字符 */
test\.sample /* 正确转义的句点 */

/* 无效的标识符 */
25rem /* 不能以小数开头 */
-25rem /* 不得以破折号/连字符开头,后跟十进制数字 */
test.sample /* 只有字母数字字符、_ 和 - 不需要转义 */
'test1' /* 不允许使用字符串 */
"test1" /* 不允许使用任何字符串 */

CSS <ident>: 用作变量的自定义标识符

以下示例演示了如何使用 <ident> 数据类型来声明一个变量并在 css 样式中使用它:

<html>
<head>
<style>
   :root {
      --body-background-color: peachpuff;
   }

   div {
      background-color: var(--body-background-color);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <h1>custom-ident - example</h1>
   <div></div>
</body>
</html> 

在上面的示例中,使用数据类型 <custom-ident> 声明了一个自定义属性,名为 --body-background-color 来设置颜色div 元素。这里的语法使用两个破折号来开头名称,后跟字母字符和连字符。