list-style-type

用于控制列表标记样式的工具类。

快速参考

类	属性
list-disc	list-style-type: disc;
list-decimal	list-style-type: decimal;
list-none	list-style-type: none;
list-(<custom-property>)	list-style-type: var(<custom-property>);
list-[<value>]	list-style-type: <value>;

示例

基础示例

使用 list-disc 和 list-decimal 等工具类来控制列表中标记的样式：

list-disc

• Now this is a story all about how, my life got flipped-turned upside down
• And I'd like to take a minute just sit right there
• I'll tell you how I became the prince of a town called Bel-Air

list-decimal

• Now this is a story all about how, my life got flipped-turned upside down
• And I'd like to take a minute just sit right there
• I'll tell you how I became the prince of a town called Bel-Air

list-none

• Now this is a story all about how, my life got flipped-turned upside down
• And I'd like to take a minute just sit right there
• I'll tell you how I became the prince of a town called Bel-Air

<!-- [!code classes:list-disc] -->
<ul class="list-disc">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

<!-- [!code classes:list-decimal] -->
<ol class="list-decimal">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ol>

<!-- [!code classes:list-none] -->
<ul class="list-none">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

使用自定义值

使用 list-[<value>] 等工具类，可根据完全自定义的值设置标记：

<ol class="list-[upper-roman] ...">
 <!-- ... -->
</ol>

对于 CSS 变量，也可以使用 list-(<custom-property>) 语法：

<ol class="list-(--my-marker) ...">
 <!-- ... -->
</ol>

这只是 list-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体前缀，即可让 list-style-type 工具类仅在中等及以上屏幕尺寸下生效：

<ul class="list-none md:list-disc ...">
 <!-- ... -->
</ul>

在变体文档中了解更多关于使用变体的信息。