怎样设置列表项的样式类型_LIST-STYLE-TYPE属性-html教程-PHP中文网

list-style-type合法值包括disc（默认实心圆）、circle（空心圆）、square（实心方块）、decimal（1,2,3）、lower-roman（i,ii,iii）、upper-alpha（a,b,c）等标准关键字，非标准值如dot会被忽略；该属性仅作用于ul或ol容器，不适用于li元素。

怎样设置列表项的样式类型_list-style-type属性

list-style-type 的合法值有哪些

这个 CSS 属性只接受特定关键字或 none，不能填任意字符串或数字。常见合法值包括：disc（实心圆点，默认）、circle（空心圆）、square（实心方块）、decimal（1, 2, 3）、lower-roman（i, ii, iii）、upper-alpha（A, B, C）等。非标准值如 dot 或 round 会被浏览器忽略，回退到默认样式。

注意：中文环境常用 decimal 和 lower-greek（α, β, γ），但后者在部分旧版 Safari 中支持不全；若需兼容，优先选 decimal 或用伪元素自定义。

直接写在 `ul` 或 `ol` 上 vs 写在 `li` 上的区别

list-style-type 必须作用于列表容器（ul 或 ol），写在 li 元素上无效——浏览器会静默丢弃该声明。这是初学者最常踩的坑。

例如：

ul {
  list-style-type: square;
}
/* ✅ 正确 */
li {
  list-style-type: circle;
}
/* ❌ 不生效，li 不是列表根容器 */

如果想让某个 li 显示不同标记，只能通过 ::marker 伪元素覆盖，或改用 list-style: none + ::before 自定义内容。

和 `list-style` 简写属性的关系

list-style-type 是 list-style 的子属性之一，后者还能同时设置 list-style-position（标记位置）和 list-style-image（自定义图片）。一旦用了 list-style 简写，未显式写出的部分会重置为初始值。

OpenClaw

一款AI开发辅助工具，主要用于开源的自托管AI智能体助手，曾用名Clawdbot、Moltbot，适合需要提升相关任务效率的用户。

下载

比如：

ul {
  list-style-type: lower-alpha;
  list-style-position: inside;
}
/* ✅ 两者都生效 */
<p>ul {
list-style: lower-greek;
}
/<em> ❌ position 回退为 outside，image 变成 none </em>/</p>

所以，如果已设过 list-style-position，再用简写时必须带上它，例如：list-style: lower-greek inside;