如何使用csslist-style属性控制列表样式-css教程-PHP中文网

list-style 是控制HTML列表样式的CSS简写属性，包含 list-style-type（标记类型）、list-style-position（标记位置）和 list-style-image（自定义图像）。通过设置这些子属性，可改变项目符号或编号的外观与布局；使用 list-style: none 并重置 padding 和 margin 可彻底清除默认样式，结合伪元素与CSS计数器能实现高度自定义的标记和复杂编号系统，如多级章节编号；list-style-position 的 outside 使文本换行后与标记对齐，inside 则让标记成为内容一部分并形成缩进块，选择需根据可读性、设计需求和文本长度权衡；有序列表可通过 start 属性或CSS计数器实现从指定数字开始及非传统编号。

如何使用csslist-style属性控制列表样式

list-style

登录后复制

属性是CSS中用来控制HTML列表（

<ul>

登录后复制

<ol>

登录后复制

) 项目符号或编号外观的核心工具。它提供了一种简洁而强大的方式，让我们能够管理列表项的标记类型、位置，甚至用自定义图像替代默认符号，从而实现更精细的视觉控制和设计自由度。

解决方案

要控制列表样式，我们主要会用到

list-style

登录后复制

这个 CSS 简写属性，它其实是

list-style-type

登录后复制

、

list-style-position

登录后复制

和

list-style-image

登录后复制

这三个子属性的集合。理解这三个子属性的工作方式，是掌握列表样式的关键。

list-style-type

登录后复制

：定义标记类型 这个属性决定了列表项前面的标记会是什么样子。对于无序列表（

<ul>

登录后复制

），常见的类型有：

```
disc
```
登录后复制
(实心圆，默认)
```
circle
```
登录后复制
(空心圆)
```
square
```
登录后复制
(实心方块)
```
none
```
登录后复制
(不显示任何标记)

对于有序列表（

<ol>

登录后复制

），它则控制编号的格式：

```
decimal
```
登录后复制
(阿拉伯数字，1, 2, 3...，默认)
```
decimal-leading-zero
```
登录后复制
(带前导零的数字，01, 02, 03...)
```
lower-alpha
```
登录后复制
或
```
lower-latin
```
登录后复制
(小写英文字母，a, b, c...)
```
upper-alpha
```
登录后复制
或
```
upper-latin
```
登录后复制
(大写英文字母，A, B, C...)
```
lower-roman
```
登录后复制
(小写罗马数字，i, ii, iii...)
```
upper-roman
```
登录后复制
(大写罗马数字，I, II, III...)

示例：

立即学习“前端免费学习笔记（深入）”；

ul {
    list-style-type: square; /* 无序列表使用方块 */
}
ol {
    list-style-type: upper-roman; /* 有序列表使用大写罗马数字 */
}

登录后复制

list-style-position

登录后复制

：定义标记位置 这个属性决定了列表项的标记是放在文本内容的“外部”还是“内部”。

```
outside
```
登录后复制
(默认值)：标记位于列表项内容框的外部。这意味着如果列表项文本很长并换行，后续的行会与标记对齐，而不是在标记下方缩进。这通常是浏览器默认行为，也是最常见的布局方式。
```
inside
```
登录后复制
：标记被视为列表项内容的一部分，位于内容框的内部。当文本换行时，所有行都会在标记下方缩进，就好像标记是列表项文本的第一个单词一样。

示例：

立即学习“前端免费学习笔记（深入）”；

ul.outside-list {
    list-style-position: outside; /* 标记在内容外部 */
}
ul.inside-list {
    list-style-position: inside; /* 标记在内容内部 */
}

登录后复制

list-style-image

登录后复制

：使用自定义图像作为标记 如果你觉得内置的标记类型不够用，或者想让列表样式与品牌设计更一致，可以使用这个属性来指定一个图像文件作为列表项的标记。

```
url('path/to/your-image.png')
```
登录后复制
：指定图像文件的路径。
```
none
```
登录后复制
：不使用图像。

需要注意的是，

list-style-image

登录后复制

的优先级高于

list-style-type

登录后复制

。如果同时设置了这两个属性，只要图像能够加载成功，

list-style-image

登录后复制

就会生效。如果图像加载失败，浏览器会回退到

list-style-type

登录后复制

指定的样式。

示例：

立即学习“前端免费学习笔记（深入）”；

ul {
    list-style-image: url('images/custom-bullet.png'); /* 使用自定义图片 */
    list-style-type: square; /* 如果图片加载失败，则回退到方块 */
}

登录后复制

list-style

登录后复制

简写属性： 为了方便，我们可以将这三个属性合并到一个

list-style

登录后复制

简写属性中。值的顺序通常是

type

登录后复制

、

position

登录后复制

、

image

登录后复制

，但实际上，只要值类型明确，顺序并不严格。未指定的值会采用其默认值。

示例：

立即学习“前端免费学习笔记（深入）”；

ul {
    list-style: square inside url('images/bullet.png');
}
/* 等同于：
ul {
    list-style-type: square;
    list-style-position: inside;
    list-style-image: url('images/bullet.png');
}
*/

登录后复制

使用

list-style: none;

登录后复制

是最快速移除所有默认列表标记的方式，它会将

list-style-type

登录后复制

、

list-style-position

登录后复制

和

list-style-image

登录后复制

都设置为

none

登录后复制

。

如何彻底移除列表的默认样式，并进行自定义？

彻底移除列表的默认样式并进行自定义，这在前端开发中是家常便饭。浏览器给

<ul>

登录后复制

和

<ol>

登录后复制

列表设置的默认样式，除了

list-style-type

登录后复制

，往往还有

padding-left

登录后复制

和

margin

登录后复制

。所以，仅仅使用

list-style: none;

登录后复制

是不够的。

要彻底“清零”列表的默认样式，我通常会这样操作：

ul, ol {
    list-style: none; /* 移除项目符号或编号 */
    padding: 0;      /* 移除左侧内边距 */
    margin: 0;       /* 移除外边距 */
}

登录后复制

这样一来，列表就变成了一个纯粹的块级元素，没有任何视觉上的“列表”痕迹。接下来，我们就可以利用 CSS 的强大功能，尤其是伪元素（

::before

登录后复制

或

::after

登录后复制

），来创建完全自定义的列表标记。

使用伪元素自定义标记：

伪元素可以让我们在不修改HTML结构的情况下，在元素内容的前面或后面插入内容。这对于自定义列表标记来说，简直是天作之合。

壁纸样机神器

免费壁纸样机生成

查看详情

ul.custom-list li {
    position: relative; /* 为伪元素定位提供参考 */
    padding-left: 20px; /* 为自定义标记留出空间 */
    line-height: 1.5;   /* 确保行高舒适 */
}

ul.custom-list li::before {
    content: "?"; /* 自定义标记内容，可以是字符、表情符号 */
    position: absolute;
    left: 0;
    top: 0; /* 或者 top: 0.2em; 根据字体大小微调 */
    color: #007bff; /* 标记颜色 */
    font-size: 1.2em; /* 标记大小 */
}

/* 如果是自定义编号，可以使用CSS计数器 */
ol.custom-numbered-list {
    counter-reset: my-custom-counter; /* 初始化计数器 */
}

ol.custom-numbered-list li {
    position: relative;
    padding-left: 30px; /* 留出更多空间给编号 */
}

ol.custom-numbered-list li::before {
    counter-increment: my-custom-counter; /* 每次出现li，计数器加1 */
    content: counter(my-custom-counter) ". "; /* 显示计数器值和点号 */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #28a745;
}

登录后复制

通过

position: relative

登录后复制

和

position: absolute

登录后复制

的组合，我们可以精确地控制自定义标记的位置。

content

登录后复制

属性则可以接受字符串、表情符号，甚至是

url()

登录后复制

函数来插入背景图片（虽然通常用

background-image

登录后复制

更灵活）。对于有序列表，CSS 计数器（

counter-reset

登录后复制

counter-increment

登录后复制

counter()

登录后复制

）提供了一种非常灵活的方式来创建复杂的编号系统，比如多级编号。这种方式的灵活性远超

list-style-type

登录后复制

的预设值。

list-style-position

登录后复制

的

inside

登录后复制

和

outside

登录后复制

有何实际区别，我该如何选择？

list-style-position

登录后复制

的

inside

登录后复制

和

outside

登录后复制

确实在视觉上和布局上有着显著的区别，理解它们能帮助我们更好地控制列表的呈现。

outside

登录后复制

(默认值)：

视觉表现： 列表项的标记（项目符号或编号）会放置在列表项内容框的外部。你可以把它想象成标记“挂”在内容区域的左边。
文本换行： 如果列表项的文本内容很长并发生换行，那么后续的文本行会与标记的 起始位置 对齐。也就是说，换行的文本不会缩进，而是紧接着第一行文本的下方开始，与标记的水平位置对齐。
适用场景： 这是最常见的列表样式，给人的感觉是标记独立于内容，清晰明了。它在大多数情况下都能提供良好的可读性，尤其适合那些内容较短、每项都比较独立的列表。我个人在设计时，如果没什么特殊需求，通常会倾向于使用
```
outside
```
登录后复制
，因为它保持了列表的传统外观，并且文本块的对齐感更强。

inside

登录后复制

：

视觉表现： 列表项的标记被视为列表项内容的一部分，放置在内容框的内部，紧贴着第一行文本的开头。
文本换行： 如果列表项的文本内容很长并发生换行，那么后续的文本行会缩进，与第一行文本的起始位置对齐，而不是与标记对齐。整个列表项的文本内容形成一个缩进的块。
适用场景：
```
inside
```
登录后复制
样式让标记看起来更像是文本的一部分。它在某些特定设计中很有用，例如当你希望列表项的标记不会占用额外的外部空间，或者当列表项文本与标记需要更紧密的视觉联系时。不过，如果列表项文本很长，
```
inside
```
登录后复制
可能会导致文本块的缩进显得有些深，或者在视觉上不如
```
outside
```
登录后复制
那么“干净利落”。在移动端布局或需要紧凑空间时，有时也会考虑
```
inside
```
登录后复制
，因为它不会因为标记而额外挤压内容区域。

如何选择？

我的选择标准通常是这样的：

可读性优先： 如果列表内容是核心信息，需要清晰易读，我会选择
```
outside
```
登录后复制
。它让标记和内容保持一定的距离，视觉上更舒适。
设计需求： 如果设计稿明确要求标记与文本紧密结合，或者在狭窄的容器中需要节省横向空间，
```
inside
```
登录后复制
可能是更好的选择。
文本长度： 如果列表项的文本普遍较长，容易换行，那么
```
outside
```
登录后复制
通常能提供更好的视觉流，避免过深的缩进。如果列表项内容非常简短，
```
inside
```
登录后复制
和
```
outside
```
登录后复制
的差异就不那么明显了。
自定义程度： 如果你打算使用伪元素来完全自定义列表标记，那么
```
list-style-position
```
登录后复制
的选择就没那么关键了，因为你可以通过
```
padding-left
```
登录后复制
和伪元素的
```
left
```
登录后复制
属性来精确控制标记位置。

总的来说，

outside

登录后复制

是一个更“安全”和通用的选择，而

inside

登录后复制

则适用于更具体的设计场景，需要你权衡其对文本对齐和空间利用的影响。

我可以为有序列表

<ol>

登录后复制

创建非传统编号，比如从特定数字开始或使用自定义计数器吗？

是的，完全可以！CSS 为有序列表（

<ol>

登录后复制

）提供了非常强大的自定义编号机制，远不止

list-style-type

登录后复制

那些预设的类型。你可以让编号从任何数字开始，甚至创建多级、复杂的自定义计数器。

1. 让编号从特定数字开始：

最简单的方法是使用 HTML 的

start

登录后复制

属性。这是直接作用在

<ol>

登录后复制

标签上的一个属性。

<ol start="5">
    <li>这是第五项</li>
    <li>这是第六项</li>
    <li>这是第七项</li>
</ol>

登录后复制

这会直接让列表从数字 5 开始编号。

另一种 CSS 的方法是使用

counter-reset

登录后复制

，但对于简单的起始数字，

start

登录后复制

属性更直接。

2. 使用 CSS 计数器创建自定义编号：

CSS 计数器（

counter-reset

登录后复制

、

counter-increment

登录后复制

和

counter()

登录后复制

函数）是实现非传统编号的核心。它们允许你创建和管理页面上的任何计数器，并将其显示在伪元素中。这对于创建像“1.1.1”这样的章节编号，或者其他复杂编号方案非常有用。

我们来看一个例子，如何创建一个从特定数字开始，并且可以实现多级编号的列表：

/* 首先，移除默认的列表样式和内边距 */
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 定义一个主计数器，例如用于章节 */
ol.chapter-list {
    counter-reset: chapter; /* 初始化名为 'chapter' 的计数器 */
}

ol.chapter-list > li {
    counter-increment: chapter; /* 每次遇到一级li，'chapter' 计数器加1 */
    position: relative;
    padding-left: 40px; /* 为编号留出空间 */
    margin-bottom: 10px;
}

ol.chapter-list > li::before {
    content: counter(chapter) ". "; /* 显示 'chapter' 计数器的值 */
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #c0392b;
}

/* 现在处理二级列表，例如子章节 */
ol.chapter-list li ol {
    counter-reset: section; /* 在每个一级li内部，重置名为 'section' 的计数器 */
    margin-top: 5px;
}

ol.chapter-list li ol li {
    counter-increment: section; /* 每次遇到二级li，'section' 计数器加1 */
    position: relative;
    padding-left: 60px; /* 为二级编号留出更多空间 */
    margin-bottom: 5px;
}

ol.chapter-list li ol li::before {
    content: counter(chapter) "." counter(section) ". "; /* 显示 'chapter' 和 'section' 计数器组合 */
    position: absolute;
    left: 0;
    font-weight: normal;
    color: #2c3e50;
}

登录后复制

HTML 结构：

<ol class="chapter-list">
    <li>
        第一章标题
        <ol>
            <li>第一章第一节</li>
            <li>第一章第二节</li>
        </ol>
    </li>
    <li>
        第二章标题
        <ol>
            <li>第二章第一节</li>
            <li>第二章第二节</li>
            <li>第二章第三节</li>
        </ol>
    </li>
</ol>

登录后复制

这段代码展示了如何利用