数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何显示带有嵌套计数器的有序列表？
列表是用于显示网页中数据或任何信息的短篇相关信息的记录，可以是有序的或无序的。列表用于将相关的几条信息分组在一起，以便它们之间清晰地关联并易于阅读。从结构的角度来看，它们是有益的，因为它们有助于创建结构良好、更易访问且易于维护的文档。它们也很有用，因为它们提供可以应用 CSS 样式的专用元素。
HTML 列表使 Web 开发人员能够将一系列相关项目组织成列表。HTML 中有三种类型的列表，每种列表都有其自身的功能和含义。
无序列表 — 一系列没有按任何特定顺序排列的相关项目。
有序列表 — 一系列按特定顺序排列的相关项目。
描述列表 — 一系列术语及其描述。
嵌套列表
嵌套列表或子列表是列表中的列表。在 HTML 中正确格式化嵌套列表的关键是认识到子列表是列表项的子项，而不是列表本身。
示例
我们可以按照下面的示例创建一个简单的嵌套有序列表。
<!DOCTYPE html>
<html>
<body>
<h3>A Nested Ordered List</h3>
<h4>Icecreams</h4>
<ol>
<li>Chocolate
<ol>
<li>Chocolate Chips</li>
<li>Belgian Dark Chocolate</li>
</ol>
</li>
<li>Vanilla</li>
<li>Strawberry</li>
</ol>
</body>
</html>
但是，上述方法不会创建具有嵌套计数器的有序列表。
我们可以使用 CSS display 属性来显示具有 1.1、1.2 等嵌套计数器的有序列表，而不是 1、2。它指定了组件（div、超链接、标题、列表等）如何在网页上放置。顾名思义，此属性用于定义网页的不同部分将如何显示。
语法
display: value;
在此代码段中，我们将讨论两种使用 display 属性创建具有嵌套计数器的有序列表的方法。
使用 display 属性的“block”值
将 display 属性设置为 block 的元素从新行开始，并占据整个屏幕宽度。对于此类元素，我们可以指定它们的宽度和高度。默认情况下处于块级元素的元素包括 <div>、<section>、<p> 等许多其他元素。我们可以通过将跨度从之前的 HTML 代码设置为块显示来使其像块级元素一样。
示例
在此示例中，我们将使用 <li> 元素的 display 属性的 block 值以及 content 和 counter-increment 属性。
<!DOCTYPE html>
<html>
<head>
<title>How to Display an Ordered List with Nested Counters?</title>
<style>
div{
background-color:mistyrose;
width:300px;
padding:5px;
}
ol {
counter-reset: item;
}
li {
display: block;
color: purple;
font-size:17px;
}
li:before {
content: counters(item, ".") "." " ";
counter-increment: item;
}
</style>
</head>
<body>
<h3>Beverages</h3>
<div>
<ol>
<li>Coffee
<ol>
<li>Frappe</li>
<li>Latte</li>
<li>Cappuccino</li>
</ol>
</li>
<li>Smoothie
<ol>
<li>Mango Smoothie</li>
<li>Banana Smoothie</li>
</ol>
</li>
<li>Mojito
<ol>
<li>Classic Mint Mojito</li>
<li>Strawberry Mojito</li>
<li>Blueberry Mojito</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
使用 display 属性的“table”值
我们现在很少使用table值，但了解它仍然有用。它在过去更有用，因为我们在浮动、Flex 和 Grid 出现之前将其用于布局。将 display 设置为 table 会使元素的行为像表格一样。因此，我们可以创建一个 HTML 表格的副本，而无需使用 table 元素和相应的元素，如 th、tr 和 td。
示例
在此示例中，我们将 <li> 元素的 display 更改为“table”，并为 :before 伪元素使用“table-cell”值。
<!DOCTYPE html>
<html>
<head>
<title>How to Display an Ordered List with Nested Counters?</title>
<style>
div{
background-color:rosybrown;
color:beige;
width:250px;
padding:10px;
}
ol {
counter-reset: item;
padding:2px;
}
li {
display: table;
counter-increment: item;
margin-top:2px;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 10px;
}
li li:before {
content: counters(item, ".") " ";
}
</style>
</head>
<body>
<h3>Film Genres</h3>
<div>
<ol>
<li>Comedy
<ol>
<li>Romantic Comedy</li>
<li>Action Comedy</li>
</ol>
</li>
<li>Drama
<ol>
<li>Legal Drama</li>
<li>Political Drama</li>
<li>Medical Drama</li>
</ol>
</li>
<li>Thriller
<ol>
<li>Psychological Thriller</li>
<li>Crime Thriller</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
1000+ 次浏览
