CSS 数据类型

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 - 禁止使用跨度值。

  • view-transition-name - 全局 CSS 值（unset, initial, inherit）被禁止，以及none。

  • will-change -禁止使用全局 CSS 值（unset、initial、inherit）以及值（will-change、auto、scroll-position 和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\3F 或 toto\00003F。

有效标识符

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

tata59            字母数字字符和数字的组合。
high-level        数字字符和破折号的组合
-nest             字母数字字符放置在破折号之后。
_external         字母数字字符放置在下划线之后。
\11 nono          Unicode 字符后面的一组字母数字字符。
tili\.wow         正确转义的句点。

无效标识符

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

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

CSS <custom-ident>: 动画名称

以下示例通过定义@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 属性与自定义标识符 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>第一段</p>
      <p>第二段</p>
      <p>第三段</p>
   </div>
</body>
</html>