CSS 数据类型 - ident_CSS 菜鸟教程

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

<< CSS 数据类型 - display-legacy CSS 数据类型 - image >>