CSS 数据类型 - <ident>

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

语法

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

任何字母字符（A 到 Z，或 a 到 z），
任何十进制数字（0 到 9），
连字符（-），
下划线（_），
转义字符（以反斜杠开头，\），
Unicode 字符，格式为反斜杠 (\)，后跟 1 到 6 个十六进制数字。它表示 Unicode 代码点。

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

/* Valid identifiers */
test1           /* A mix of alphanumeric characters and numbers */
test-sample     /* A mix of alphanumeric characters and numbers with a hyphen (-) */
-test1          /* A dash/hyphen followed by alphanumeric characters */
--test1         /* A custom-property like identifier */
_test1          /* An underscore followed by alphanumeric characters */
\11 test        /* A Unicode character followed by a sequence of alphanumeric characters */
test\.sample    /* A correctly escaped period */

/* Invalid identifiers */
25rem           /* Must not start with a decimal digit */
-25rem          /* Must not start with a dash/hyphen followed by a decimal digit */
test.sample     /* Only alphanumeric characters, _, and - needn't be escaped */
'test1'         /* No string allowed */
"test1"         /* No string allowed */

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 元素的颜色。这里的语法使用两个破折号开头，后跟字母字符和连字符。

打印页面