Skip to Content
CSS:权威指南,第 5 版
book

CSS:权威指南,第 5 版

by Eric Meyer, Estelle Weyl
May 2025
Intermediate to advanced
1128 pages
15h 21m
Chinese
O'Reilly Media, Inc.
Content preview from CSS:权威指南,第 5 版

第 16 章 列表和生成内容 列表和生成内容

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见:translation-feedback@oreilly.com

在 CSS 布局领域,列表是一个有趣的案例。列表中的项目都是简单的方框,只是在一侧多了一个不参与文档布局的部分。在有序列表中,额外的部分包含一系列递增的数字(或字母),这些数字(或字母)由用户代理(而非作者)进行计算和格式化。根据文档结构的提示,用户代理生成数字及其基本表现形式。

利用 CSS,您可以定义自己的计数模式和格式,并将这些计数器与任何元素关联起来,而不仅仅是有序列表项。此外,这种基本机制还可以在文档中插入其他类型的内容,包括文本字符串、属性值甚至外部资源。因此,使用 CSS 可以在设计中插入链接图标、编辑符号等,而无需创建额外的标记。

为了了解所有这些列表选项是如何组合在一起的,我们将先探讨基本的列表样式,然后再研究内容和计数器的生成。

使用列表

从某种意义上说,几乎任何不是叙述性文字的东西都可以被视为列表。美国人口普查、太阳系、我的家谱、餐厅菜单,甚至是你曾经有过的所有朋友,都可以用列表来表示,或者说是列表的列表。如此多的变化使得列表变得相当重要,这也是为什么 CSS 中的列表样式没有更加复杂的原因。

影响列表样式的最简单(也是支持最好的)方法是更改其标记类型。例如,在无序列表中,列表项的标记是出现在每个项旁边的圆点。在有序列表中,标记可以是字母、数字或其他计数系统的符号。你甚至可以用图像来代替标记。所有这些都可以通过使用不同的列表样式属性来实现。

列表类型

要在上更改用于列表项的标记类型,请使用list-style-type 属性。

可以使用文本字符串作为标记,如list-style-type: "▷" 。此外,<counter-style> 代表一长串可能的关键字或使用@counter-style 定义的自定义计数器样式(请参阅"定义计数模式")。这些列表样式类型的几个示例如图 16-1 所示。

css5 1601
图 16-1. 列表样式类型示例

这里列出了这些关键字(以及一些特定于浏览器的附加功能):

afaramaricamaric-abegedearabic-indic armenian asterisksbengali binarycambodian circle cjk-decimal * cjk-earthly-branch cjk-heavenly-stem cjk-ideographic decimal decimal-leading-zero devanagari disc disclosure-closed disclosure-open ethiopicethiopic-abegedeethiopic-abegede-am-etethiopic-abegede-gezethiopic-abegede-ti-erethiopic-abegede-ti-et ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

学习 Java,第 6 版

学习 Java,第 6 版

Marc Loy, Patrick Niemeyer, Daniel Leuck
学习 React,第二版

学习 React,第二版

Alex Banks, Eve Porcello

Publisher Resources

ISBN: 9798341657021