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-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, disclosure-close。
grid-row-start, grid-row-end, grid-column-start, grid-column-end − 禁止使用 span 值。
view-transition-name − 禁止使用全局 CSS 值（unset、initial、inherit），以及 none。
will-change − 禁止使用全局 CSS 值（unset、initial、inherit），以及 (will-change, auto, scroll-position, and contents) 值。

语法

CSS <custom-ident> 的语法遵循与 CSS 属性名称相同的规则，但它区分大小写。此元素包含一个或多个字符，定义如下：

A 到 Z 或 a 到 z 之间的任何字母。
0 到 9 之间的任何十进制数字。
连字符 (-) 字符。
下划线 (_) 字符。
转义字符定义为反斜杠 (/) 后面的字符。
由反斜杠 (/) 后跟一个到六个十六进制数字表示的 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            A combination of alphanumeric characters and numbers.
high-level        A combination of alphanumeric characters and a dash
-nest             Alphanumeric characters are placed after a dash.
_external         Alphanumeric characters are placed after a underscore.
\11 nono          A group of alphanumeric characters that follows a Unicode character.
tili\.wow         A correctly escaped period.

无效标识符

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

24rem             It must not begin with a decimal digit.
-16rad            It cannot begin with a dash followed by a decimal digit.
tili.wow          The only characters that don't require escape are alphanumeric characters, _, and -.
'tiliwow'         This would be a <string>.
"tiliwow"         This would be a <string>.

CSS <custom-ident> - animation-name

以下示例演示了通过定义@Keyframes -demoanimation 来使用animation-name 属性。连字符 (-) 命名约定作为自定义标识符附加到 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, counter-increment

以下示例演示了使用自定义标识符demo-counter 的counter-reset 属性，并将它的初始值设置为 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>

打印页面