資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
