CSS @规则(At-rules)系列详解___@counter-style 规则使用方法

🕗 发布于 2024-10-17 20:03 前端 At-rules系列 counter-style css3 web3

CSS @规则(At-rules)系列详解

___@counter-style 规则使用方法

零、时光宝盒

（https://blog.csdn.net/weixin_69553582 逆境清醒）

　　鸟妈妈在雨天用自己的翅膀给小鸟撑起了一个温暖的家。希望你们和你们家人一起，共同在风雨中撑起一个温暖休憩的家，为了你们家人，也为了你们自己。

　　图片来源于网络视频截图。

逆境清醒

2024.10.17

一、@counter-style 规则定义和用法

　　在 CSS 中，@counter-style 规则用于自定义列表计数器的样式。

　　通过 @counter-style 规则，你可以定义列表项的计数器的样式，包括计数器的类型、前缀、后缀、递增方式等。这允许你创建自定义的计数器样式，使列表更具个性化和可读性。

@counter-style 规则使用以下语法：

@counter-style name {
  properties;
}

　　其中，name 是你为计数器样式起的名称，properties 是一个包含计数器样式属性的声明块。

常用的 @counter-style 属性包括：

- system：指定计数器的类型，可以是 numeric、alphabetic、symbolic 或 fixed；
- symbols：指定计数器的符号；
- suffix：指定计数器的后缀；
- additive-symbols：用于指定多位数的计数器符号。

二、@counter-style 语法

2.1、正式语法

@counter-style = 
  @counter-style <counter-style-name> { <declaration-list> }

语法：

@counter-style @规则：

　　由计数器样式名称标识，并且可以使用由一个或多个描述符及其值组成的 <declaration-list> 对命名计数器的样式进行微调。

计数器样式名称<counter-style-name>：

　　为您的计数器样式提供一个名称。

　　它被指定为一个区分大小写的 <custom-ident>，不带引号。

　　该值不应等于 none。

　　与所有自定义标识符一样，计数器样式的值不能是 CSS 全局关键字。避免其他枚举的 CSS 属性值，包括列表和计数器样式属性的值。

　　计数器的名称不能是 decimal、disc、square、circle、disclosure-open 和 disclosure-closed 等不区分大小写的 list-style-type 属性值。

注意：

　　不可覆盖的计数器样式名称 decimal、disc、square、circle、disclosure-open 和 disclosure-closed 不能用作自定义计数器的名称。

　　但是，它们在预期 <counter-style-name> 数据类型的其他上下文中有效，例如在 system: extends <counter-style-name> 中。

2.2、更改与计数器关联的词缀

更改与计数器关联的词缀（前缀和/或后缀）

在列表中，计数器可能跟着一个句点 + 空格，用括号括起来，或者后面跟一个特定于脚本的分隔符，等等。事实上，同一页面上可能会使用不同的策略，具体取决于嵌套级别或使用列表的上下文。

对于此处显示的样式，我们应用通用的默认值。（通常，未指定 non，这将导致句点 + 空格后缀。如果你想要一个不同的词缀，你应该做适当的改变。

需要按如下方式显式定义仅空格后缀：

suffix: ' ';

括号中的计数器需要同时定义 prefix 和 suffix：

prefix: '(';
suffix: ') ';

注释用于描述给定样式的替代词缀，当它们涉及非 ASCII 字符或其他特殊排列时，将提供建议的代码。

例如，Myanmar 可能用作后缀，因此 Myanmar 部分包括：

suffix: '။ ';

如果你想为给定的 counter 样式提供多个替代的词缀声明，你会发现使用标准扩展机制添加另一种样式是最有效的。

例如，下面定义了两种样式，它们仅在使用的前缀/后缀上有所不同。

样式一：

@counter-style myanmar {
system: numeric;
symbols: '\FF10' '\FF11' '\FF12' '\FF13' '\FF14' '\FF15' '\FF16' '\FF17' '\FF18' '\FF19';
/* symbols: '０' '１' '２' '３' '４' '５' '６' '７' '８' '９'; */
prefix: '(';
suffix: ') ';
}
ol { list-style-type: myanmar; }

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>
<br>
<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ul>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

效果如下：

样式二：

@counter-style myanmar {
system: numeric;
symbols: '\FF10' '\FF11' '\FF12' '\FF13' '\FF14' '\FF15' '\FF16' '\FF17' '\FF18' '\FF19';
/* symbols: '０' '１' '２' '３' '４' '５' '６' '７' '８' '９'; */
prefix: '';
suffix: "။ ";
}
ol { list-style-type: myanmar; }

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>
<br>
<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ul>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

效果如下：

2.3、描述符

描述符
system	指定用于将计数器的整数值转换为字符串表示形式的算法。	如果该值为 cyclic、numeric、alphabetic、symbolic 或 fixed，则还必须指定 symbols 描述符。如果该值为 additive，则还必须指定 additive-symbols 描述符。
symbols	指定要用于标记表示的符号。如果 system 描述符设置为 cyclic、numeric、alphabetic、symbolic 或 fixed，则此描述符是必需的。	符号可以包含字符串、图像或自定义标识符。
additive-symbols	定义加法计数器的加法元组。描述符是一个计数器符号列表及其非负整数权重，按权重降序排列。如果system描述符设置为additive，则需要此描述符。	大多数算法使用symbols描述符中指定的符号来构建标记表示。加法计数器系统（例如罗马数字）由一系列加权符号组成。
negative	指定如果值为负数，则要附加到或前置到计数器表示的符号。
prefix	指定应前置到标记表示的符号。前缀在最后阶段添加到表示中，在negative描述符为负计数器值添加的任何字符之前。
suffix	类似于前缀描述符，指定附加到标记表示的符号。后缀位于标记表示之后，包括negative描述符为负计数器值添加的任何字符之后。
range	定义计数器样式适用的值范围。如果使用计数器样式来表示此描述符定义范围之外的计数器值，则计数器样式将回退到其fallback样式。
pad	当您需要标记表示具有最小长度时使用。例如，如果您希望计数器从01开始并依次递增到02、03、04等，则应使用pad描述符。对于大于指定pad值的表示，标记将按正常方式构建。
speak-as	描述语音合成器（例如屏幕阅读器）如何宣布计数器样式。例如，列表项标记的值可以根据此描述符的值读出为数字或字母（对于有序列表）或音频提示（对于无序列表）。
fallback	指定当指定的系统无法构造计数器值的表示形式，或者计数器值超出指定范围时要回退到的系统。如果指定的后备也无法表示该值，则使用后备样式的后备（如果指定了）。如果没有描述回退系统，或者如果回退系统链无法表示计数器值，那么它将最终回退到十进制样式。

三、@counter-style 使用方法例子

3.1、指定符号使用Ⓐ Ⓑ Ⓒ Ⓓ。。。 Ⓩ

使用计数器样式指定符号

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
li {
   list-style: circled-alpha;
}

上述计数器样式规则可以应用于如下列表

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的计数前缀：

3.2、指定符号使用（指定符号symbols 码)

@counter-style thumbs {
  system: cyclic;
  symbols: "\270D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的计数前缀：

3.3、指定符号使用（指定具体的symbols 图像)

@counter-style thumbs {
  system: cyclic;
  symbols: "🌻";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的计数前缀：

3.4、自定义有序列表前缀

@counter-style emoji-decimal {
  system: numeric;
  symbols: '\30\FE0F\20E3' '\31\FE0F\20E3' '\32\FE0F\20E3' '\33\FE0F\20E3' '\34\FE0F\20E3' '\35\FE0F\20E3' '\36\FE0F\20E3' '\37\FE0F\20E3' '\38\FE0F\20E3' '\39\FE0F\20E3';
  suffix: " ";
}

ol { list-style-type: emoji-decimal; }

<ol>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ol>

这样，我们就可以得到自定义的有序列表前缀：

3.5、带圆圈的十进制

@counter-style filled-circled-decimal{
system: fixed;
symbols: '\2776' '\2777' '\2778' '\2779' '\277a' '\277b' '\277c' '\277d' '\277e' '\277f' '\24EB' '\24EC' '\24ED' '\24EE' '\24EF' '\24F0' '\24F1' '\24F2' '\24F3' '\24F4';
/* symbols: '❶' '❷' '❸' '❹' '❺' '❻' '❼' '❽' '❾' '❿' '⓫' '⓬' '⓭' '⓮' '⓯' '⓰' '⓱' '⓲' '⓳' '⓴'; */
suffix: ' ';
}
ul { list-style-type: filled-circled-decimal; }

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的带圆圈的十进制有序列表前缀：

3.6、全角十进制

@counter-style fullwidth-decimal {
system: numeric;
symbols: '\FF10' '\FF11' '\FF12' '\FF13' '\FF14' '\FF15' '\FF16' '\FF17' '\FF18' '\FF19';
/* symbols: '０' '１' '２' '３' '４' '５' '６' '７' '８' '９'; */
suffix: '\FF0E';
/* suffix: '．'; */
}
ul { list-style-type: fullwidth-decimal; }

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的全角十进制有序列表前缀：

3.7、括号大小为十进制

@counter-style parenthesized-decimal {
system: fixed;
symbols: '\2474' '\2475' '\2476' '\2477' '\2478' '\2479' '\247A' '\247B' '\247C' '\247D' '\247E' '\247F' '\2480' '\2481' '\2482' '\2483' '\2484' '\2485' '\2486' '\2487';
/* symbols: '⑴' '⑵' '⑶' '⑷' '⑸' '⑹' '⑺' '⑻' '⑼' '⑽' '⑾' '⑿' '⒀' '⒁' '⒂' '⒃' '⒄' '⒅' '⒆' '⒇'; */
suffix: ' ';
}
ul { list-style-type: parenthesized-decimal; }

<ul>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
    <li>心朝太阳，用吸收的满满正能量去蒸发掉忧伤。</li>
</ul>

这样，我们就可以得到自定义的括号大小为十进制有序列表前缀：

3.8、梵文

@counter-style bodo {
system: alphabetic;
symbols: '\915' '\916' '\917' '\918' '\919' '\91A' '\91B' '\91C' '\91D' '\91E' '\91F' '\920' '\921' '\922' '\923' '\924' '\925' '\926' '\927' '\928' '\92A' '\92B' '\92C' '\92D' '\92E' '\92F' '\930' '\932' '\935' '\936' '\937' '\938' '\939' ;
/* symbols: 'क' 'ख' 'ग' 'घ' 'ङ' 'च' 'छ' 'ज' 'झ' 'ञ' 'ट' 'ठ' 'ड' 'ढ' 'ण' 'त' 'थ' 'द' 'ध' 'न' 'प' 'फ' 'ब' 'भ' 'म' 'य' 'र' 'ल' 'व' 'श' 'ष' 'स' 'ह' */
suffix: ') ';
}
ol { list-style-type: bodo; }

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的梵文有序列表前缀：

3.9、日语

@counter-style hiragana {
system: alphabetic;
symbols: '\3042' '\3044' '\3046' '\3048' '\304A' '\304B' '\304D' '\304F' '\3051' '\3053' '\3055' '\3057' '\3059' '\305B' '\305D' '\305F' '\3061' '\3064' '\3066' '\3068' '\306A' '\306B' '\306C' '\306D' '\306E' '\306F' '\3072' '\3075' '\3078' '\307B' '\307E' '\307F' '\3080' '\3081' '\3082' '\3084' '\3086' '\3088' '\3089' '\308A' '\308B' '\308C' '\308D' '\308F' '\3090' '\3091' '\3092' '\3093';
/* symbols: あ い う え お か き く け こ さ し す せ そ た ち つ て と な に ぬ ね の は ひ ふ へ ほ ま み む め も や ゆ よ ら り る れ ろ わ ゐ ゑ を ん; */
suffix: '、';
}
ol { list-style-type: hiragana; }

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的日语有序列表前缀：

3.10、带圆圈的朝鲜语辅音

@counter-style circled-korean-consonant {
system: fixed;
symbols: '\3260' '\3261' '\3262' '\3263' '\3264' '\3265' '\3266' '\3267' '\3268' '\3269' '\326A' '\326B' '\326C' '\326D';
/* symbols: '㉠' '㉡' '㉢' '㉣' '㉤' '㉥' '㉦' '㉧' '㉨' '㉩' '㉪' '㉫' '㉬' '㉭'; */
suffix: ' ';
}
ol { list-style-type:circled-korean-consonant; }

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的带圆圈的朝鲜语辅音有序列表前缀：

3.11、韩语

@counter-style korean-hangul-formal {
system: additive;
range: -9999 9999;
additive-symbols: 9000 '\AD6C\CC9C', 8000 '\D314\CC9C', 7000 '\CE60\CC9C', 6000 '\C721\CC9C', 5000 '\C624\CC9C', 4000 '\C0AC\CC9C', 3000 '\C0BC\CC9C', 2000 '\C774\CC9C', 1000 '\C77C\CC9C', 900 '\AD6C\BC31', 800 '\D314\BC31', 700 '\CE60\BC31', 600 '\C721\BC31', 500 '\C624\BC31', 400 '\C0AC\BC31', 300 '\C0BC\BC31', 200 '\C774\BC31', 100 '\C77C\BC31', 90 '\AD6C\C2ED', 80 '\D314\C2ED', 70 '\CE60\C2ED', 60 '\C721\C2ED', 50 '\C624\C2ED', 40 '\C0AC\C2ED', 30 '\C0BC\C2ED', 20 '\C774\C2ED', 10 '\C77C\C2ED', 9 '\AD6C', 8 '\D314', 7 '\CE60', 6 '\C721', 5 '\C624', 4 '\C0AC', 3 '\C0BC', 2 '\C774', 1 '\C77C', 0 '\C601';
/* additive-symbols: 9000 구천, 8000 팔천, 7000 칠천, 6000 육천, 5000 오천, 4000 사천, 3000 삼천, 2000 이천, 1000 일천, 900 구백, 800 팔백, 700 칠백, 600 육백, 500 오백, 400 사백, 300 삼백, 200 이백, 100 일백, 90 구십, 80 팔십, 70 칠십, 60 육십, 50 오십, 40 사십, 30 삼십, 20 이십, 10 일십, 9 구, 8 팔, 7 칠, 6 육, 5 오, 4 사, 3 삼, 2 이, 1 일, 0 영 */
suffix:', ';
negative: "\B9C8\C774\B108\C2A4  ";
/* 마이너스 (followed by a space) */
}
ol { list-style-type:korean-hangul-formal; }

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的韩语有序列表前缀：

3.9、泰语

@counter-style thai {
system: numeric;
symbols: '\E50' '\E51' '\E52' '\E53' '\E54' '\E55' '\E56' '\E57' '\E58' '\E59';
/* symbols: '๐' '๑' '๒' '๓' '๔' '๕' '๖' '๗' '๘' '๙'; */
}

ol { list-style-type: thai; }

<ol>
  <li>第一项</li>
  <li>
    第二项
    <!-- closing </li> tag not here! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>第三项</li>
</ol>

这样，我们就可以得到自定义的泰语有序列表前缀：

推荐阅读：CSS @规则(At-rules)索引目录



给照片换底色（python+opencv）	猫十二分类	基于大模型的虚拟数字人__虚拟主播实例

计算机视觉__基本图像操作（显示、读取、保存）	直方图（颜色直方图、灰度直方图）	直方图均衡化（调节图像亮度、对比度）

语音识别实战（python代码）(一）	人工智能基础篇	计算机视觉基础__图像特征



matplotlib 自带绘图样式效果展示速查（28种，全）




Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）



立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦	Python 3D可视化（一）	让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)

python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印	用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）	python爱心源代码集锦（18款）

Python中Print()函数的用法___实例详解(全，例多）	Python函数方法实例详解全集(更新中...)	《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念

用代码过中秋，python海龟月饼你要不要尝一口？	python练习题目录

草莓熊python turtle绘图（风车版）附源代码	草莓熊python turtle绘图代码（玫瑰花版）附源代码	草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码



巴斯光年python turtle绘图__附源代码	皮卡丘python turtle海龟绘图（电力球版）附源代码



Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）	色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)	2024年6月多家权威机构____编程语言排行榜__薪酬状况



手机屏幕坏了____怎么把里面的资料导出（18种方法）	【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)	查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决



vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特	别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)	SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）	HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)	2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）


tomcat11、tomcat10 安装配置（Windows环境）（详细图文）	Tomcat端口配置（详细）	Tomcat 启动闪退问题解决集（八大类详细）

原文地址：https://blog.csdn.net/weixin_69553582/article/details/143024449

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：移动硬盘无法访问怎么修复？详细教程来了
下一篇：性能测试：流量回放工具-GoReplay！结合一款无需CA证书即可抓取HTTPS明文的工具，简直无敌

【人工智能-初级】第3章 k-最近邻算法（KNN）：分类和Python实现
K-最近邻算法（K-Nearest Neighbors，简称KNN）是一种简单而有效的监督学习算法，主要用于分类和回归问题。在分类问题中，KNN算法通过计算测试样本与训练样本之间的距离，找到距离测试样
阅读更多2024-10-18
Java使用原生HttpURLConnection实现发送HTTP请求
HttpURLConnection 是 Java 提供的原生标准的用于发送 HTTP 请求和接收 HTTP 响应的一个类，它位于 java.net 包下，并继承了 URLConnection 类。Ht
阅读更多2024-10-18
React前端框架高级技巧
自定义Hooks是React 16.8引入的一个强大特性,允许你将组件逻辑提取到可重用的函数中。}, []);// 在组件中使用掌握这些React高级技巧,你将能够编写出更加高效、可维护的代码。Rea
阅读更多2024-10-18
Google Tx-LLM：用大型语言模型助力治疗药物开发
值得注意的是，Tx-LLM不仅可以结合分子信息与文本信息，还能在不同类型的治疗任务之间实现能力迁移，成为贯穿药物开发全流程的单一模型。在性能测试中，Tx-LLM在许多任务上展现了强大的数值预测能力，这
阅读更多2024-10-18
机器学习面试笔试知识点之K近邻算法(KNN)、最大期望算法(EM)
机器学习面试笔试知识点之K近邻算法(KNN)、最大期望算法(EM)
阅读更多2024-10-18
【STM32】STM32学习笔记-EXTI外部中断
外部中断（EXTI）是STM32单片机中常用的一种中断方式，它允许单片机对外部事件快速响应。本文将详细介绍如何使用STM32的EXTI外部中断，包括配置步骤和代码示例。
阅读更多2024-10-18
Spring Boot比Spring多哪些注解
需要注意的是，虽然这些注解是Spring Boot特有的，但Spring Boot本身是基于Spring框架构建的，因此它仍然支持Spring框架中的所有注解。此外，随着Spring Boot的不断发
阅读更多2024-10-18
Linux 命令 chown 和 chmod 的区别
chmod 命令可以更改文件的读（r）、写（w）和执行（x）权限，适用于文件所有者（u）、同组用户（g）、其他用户（o）以及所有用户（a）mode：新的权限模式，可以是字母和操作符的组合，如 u+rw
阅读更多2024-10-18
AWS账号的费用结构与使用指南
然而，虽然创建账号不需要费用，但使用AWS的各种服务通常是要收费的。总之，AWS账号本身是免费的，但使用AWS提供的服务通常会产生费用。了解AWS的费用结构、合理利用免费套餐以及定期监控使用情况，是确
阅读更多2024-10-18
推荐算法的学习
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考LR的主要限制在于需要大量手动特征
阅读更多2024-10-18

CSS @规则(At-rules)系列详解___@counter-style 规则使用方法