CSS 数据类型 <ident>表示用作标识符的任意字符串。
语法
数据类型 <custom-ident> 的语法类似于 CSS 标识符,例如属性名称。唯一的区别是它区分大小写。它可以包含一个或多个字符,其中字符可以是下列字符之一:
- 任何字母字符(A 到 Z,或 a 到 z),
- 任何十进制数字(0 到 9),
- 连字符 (-),
- 下划线 (_),
- 转义字符(前面是反斜杠 \),
- Unicode 字符,格式为反斜杠 (\),后跟 1 到 6 个十六进制数字。它表示 Unicode 码位。
注意:由于 <custom-ident> 的语法区分大小写,因此 ID1、id1、Id1 和 iD1 等标识符都是不同的标识符。
/* 有效标识符 */
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 元素的颜色。此处的语法使用两个破折号作为名称的开头,后跟字母字符和连字符。