CSS 数据类型 - custom-ident

CSS 数据类型 <custom-ident> 表示自定义标识符。它用于表示开发人员为某些 CSS 属性或值定义的自定义名称或标识符。此数据类型允许使用预定义的关键字和标准标识符之外的自定义名称，从而实现更广泛的可能性。

自定义标识符通常用于开发人员希望为样式或主题设置的某些方面创建和使用自己的命名约定的情况。

例如，在 CSS 变量（自定义属性）的上下文中，您可以使用 <custom-ident> 来表示变量名称的自定义标识符：


:root {
	 	--main-color: red;
}

.element {
	 	color: var(--main-color);
}

在此示例中，--main-color 是一个自定义标识符，var（）函数用于引用存储在自定义属性中的值。

禁止的值

为防止不确定性，使用 <custom-ident> 的每个属性都禁止使用下面列出的特定值：

animation-name - 全局CSS值（unset，initial，inherit和none）被禁止。
counter-reset， counter-increment - 全局 CSS 值（unset、initial、inherit 和 none）被禁止。
@counter-style， list-style-type − 全局 CSS 值（unset， initial， inherit）被禁止使用（none、inline、outside），以及值：disc、circle、square、decimal、cjk-decimal、decimal-leading-zero、lower-roman、upper-roman、lower-roman、lower-greek、lower-alpha、lower-latin、upper-alpha、upper-latin、arabic-indic、亚美尼亚语、孟加拉语、柬埔寨语、cjk-earthly-branch、cjk-heavenly-stem、cjk-象形文字、梵文、埃塞俄比亚数字、格鲁吉亚语、古吉拉特语、gurmukhi、希伯来语、平假名、平假名-iroha、日语-正式、日本-非正式、卡纳达语、片假名-oō、片假名-iroha、高棉语、朝鲜韩文-正式、朝鲜-汉字-正式、朝鲜-汉字-非正式、老挝、下亚美尼亚语、马拉雅拉姆语、蒙古语、缅甸、奥里亚语、波斯语、简单中文-正式、辛普-中文-非正式、泰米尔语、泰卢固语、泰语、藏语、传统-中文-正式、传统-中国-非正式、上-亚美尼亚语、披露-开放、披露-关闭。
grid-row-start、grid-row-end、grid-column-start、grid-column-end − 跨度值被禁止。
view-transition-name - 全局CSS值（unset，initial，inherit）被禁止，也没有。
will-change - 禁止使用全局 CSS 值（unset、initial、inherit）以及值（will-change、auto、scroll-position 和 contents）。

语法

CSS 的语法 <custom-ident> 遵循与 CSS 属性名称相同的规则，不同之处在于它区分大小写。此元素包含一个或多个字符，定义为以下任何字符：

从 A 到 Z 或 a 到 z 的任何字母。
0 到 9 之间的任何十进制数字。
连字符（-）字符。
下划线（_）字符。
转义字符定义为反斜杠（/）之后的字符。
由反斜杠（/）后跟 1 到 6 个十六进制数字表示的 Unicode 字符。

转义字符

Unicode 码位可以包含在<custom-ident>或引号<string>中，方法是对它们进行转义。

CSS 提供了多种转义字符的方法。转义序列以反斜杠（\）开头，后跟：

可以选择性地将一到六位数字（ABCDEF0123456789）的十六进制序列后跟空格。这些序列被与指定十六进制数字对应的 Unicode 码位替换，空格允许后续的实际十六进制数字。
任何既不是十六进制数也不是换行符的 Unicode 码位。

例子：

“&B”可以表示为 \26 B 或 \000026B。
“hi.there”可以表示为 hi\.there 或 hi\002Ethere。
“toto？”可以写成toto\？、toto\3F或toto\00003F。

有效标识符

以下语法表示字母数字字符和数字的组合 -


tata59 	 	 	 	 	 	字母数字字符和数字的组合。
high-level 	 	 	 	字母数字字符和破折号的组合
-nest 	 	 	 	 	 	 字母数字字符放在破折号后面。
_external 	 	 	 	字母数字字符放在下划线后面。
\11 nono 	 	 	 	 	跟随Unicode字符的一组字母数字字符。
tili\.wow 	 	 	 	 一个正确逃脱的时期。

标识符无效

以下语法表示表示值的特定规则 -


24rem 	 	 	 	 	 	它不能以十进制数字开头。
-16rad 	 	 	 	 	 	它不能以破折号开头，后跟十进制数字。
tili.wow 	 	 	 	 	唯一不需要转义的字符是字母数字字符 _,和 -.
'tiliwow' 	 	 	 	 这将是一个<string>。
"tiliwow" 	 	 	 	 这将是一个<string>。

CSS <custom-ident> - 动画名称

以下示例通过定义 -demoanimation 来演示如何使用 animation-name 属性@Keyframes。连字符（-）命名约定作为自定义标识符附加到CSS语法中 -


<html>
<head>
<style>
	 	@keyframes -demoanimation {
	 	 	 0% {
	 	 	 transform: translateX(0);
	 	 	 }
	 	 	 50% {
	 	 	 transform: translateX(100px);
	 	 	 }
	 	 	 100% {
	 	 	 transform: translateX(0);
	 	 	 }
	 	}
	 	.box {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	 	 animation-name: -demoanimation;	
	 	 	 animation-duration: 3s;
	 	 	 animation-iteration-count: infinite;
	 	}
</style>
</head>
<body>
	 	<div class="box"></div>
</body>
</html>

CSS <custom-ident> - 反重置，反增量

以下示例演示了如何将 counter-reset 属性与自定义标识符 demo-counter 一起使用，并将其初始值设置为 0。counter-increment 属性每次都会增加计数器的值 -


<html>
<head>
<style>
	 	body {
	 	 	 counter-reset: demo-counter;	
	 	}
	 	p::before {
	 	 	 content: counter(demo-counter);	
	 	 	 counter-increment: demo-counter;	
	 	 	 margin: 5px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p>First Paragraph</p>
	 	 	 <p>Second Paragraph</p>
	 	 	 <p>Third Paragraph.</p>
	 	</div>
</body>
</html>

本页