在web設計中，使用一種井井有條的方法來(lái)展示數據是十分重要的，這樣用戶(hù)就可以很清晰的理解網(wǎng)站所展示的數據結構和內容，使用有序列表就是實(shí)現數據有組織的展示的一種簡(jiǎn)單方法。
如果你需要更加深入地控制有序列表數字的樣式，你可能會(huì )覺(jué)得必須通過(guò)增加更多的 html DOM 結構或者通過(guò) JavaScript 才能做到。幸運的是，使用 CSS計數器 可以更加容易的解決這個(gè)問(wèn)題。
在這篇教程中，我們將學(xué)習到什么是 CSS計數器 和一些使用案例。
當你寫(xiě)了一個(gè)如下的有序列表，瀏覽器會(huì )自動(dòng)在列表項前面加上數字
<ol> <li>My First Item</li> <li>My Second Item</li> <li>My Third Item</li> </ol>
這看起來(lái)很好，但是它不允許你對數字進(jìn)行樣式調整。假如，你需要把列表前的數字放進(jìn)一個(gè)圓圈里來(lái)修飾列表，你該怎么做呢？
一種方法是完全刪除列表，并自己手動(dòng)添加數字。
<div> <span>1</span> My First Item </div> <div> <span>2</span> My Second Item </div> <div> <span>3</span> My Third Item </div>
div {
margin-bottom:10px;
}
div span {
display:inline-flex;
align-items:center;
justify-content:center;
width:25px;
height:25px;
border-radius:50%;
background-color:#000;
color:#fff;
}
這確實(shí)是我們想要做的效果，但是也有一些缺點(diǎn)。首先，手動(dòng)添加數字是很麻煩的。如果你需要更改一個(gè)編號，你必須一個(gè)接一個(gè)地改變它們。面對這種情況，你可以使用 JavaScript 動(dòng)態(tài)添加 <span> 標簽來(lái)解決這些問(wèn)題，但這會(huì )為 DOM 添加更多的節點(diǎn)，從而導致大量?jì)却嬲加谩?/p>
在大多數情況下，最好使用CSS計數器。讓我們來(lái)看看原因。
CSS計數器是網(wǎng)頁(yè)范圍變量，其值可以使用 CSS 規則更改。
首先，使用 counter-reset 屬性設置計數器。list-number 是此處使用的變量名。
div.list {
counter-reset: list-number;
}接著(zhù)，使用 counter-increment屬性來(lái)增加計數器的值。
div.list div {
counter-increment: list-number;
}現在，每次出現 div.listdiv 元素時(shí)，list-number 變量都會(huì )增加一。
最后，使用含有設置 content屬性和 counter()函數的 :before 偽元素來(lái)展示數字。
div.list div:before {
content: counter(list-number);
}這里是完整代碼:
<div class="list"> <div>My first item</div> <div>My second item</div> <div>My third item</div> </div>
div.list {
counter-reset: list-number;
}
/** 可以在:before 為元素中使用 counter-increment **/
div.list div:before {
counter-increment: list-number;
content: counter(list-number);
}現在我們還沒(méi)有完全達到目標。讓我們對 :before 偽元素進(jìn)行樣式設計，使其看起來(lái)更好。
div.list div:before {
counter-increment: list-number;
content: counter(list-number);
margin-right: 10px;
margin-bottom:10px;
width:35px;
height:35px;
display:inline-flex;
align-items:center;
justify-content: center;
font-size:16px;
background-color:#d7385e;
border-radius:50%;
color:#fff;
}默認情況下，counter-reset 會(huì )將計數器設置為 0。當第一個(gè) counter-increment 被調用后它的起始變?yōu)? 可以通過(guò)將一個(gè)整數作為 counter-reset 函數的第二個(gè)參數來(lái)設置初始值。
div.list {
counter-reset: list-number 1;
}
如果你想從 0 開(kāi)始，可以將初始值設置為 -1。
div.list {
counter-reset: list-number -1;
}
默認情況下，counter-increment 會(huì )使計數器的值增加一。就像 counter-reset 一樣，你可以定義 counter-increment 屬性的偏移值。
在此示例中，counter-reset 將 list-number 設置為 0。每次調用 counter-increment 時(shí)，list-number 數值都會(huì )增加 2，因此，你將會(huì )看到列表序為 2、4 和 6。
div.list {
counter-reset: list-number;
}
div.list div:before {
counter-increment: list-number 2;
// other styles
}
counter() 函數可以有兩個(gè)參數：counter-name 和 counter-format。對于第二個(gè)參數，你可以使用任何有效的列表類(lèi)型值，包括：
decimal (e.g., 1, 2, 3…)
lower-latin (e.g., a, b, c…)
lower-roman (e.g., i, ii, iii…)
默認值為數字。
例如，如果你像我一樣科學(xué)，你可以使用 lower-greek 小寫(xiě)希臘字母作為編號的值。
div.list div:before {
counter-increment: list-number;
content: counter(list-number, lower-greek);
// ... other styles
}
使用嵌套訂單列表時(shí)，始終以這種格式顯示編號：
如果您需要子列表項目的數字編號（例如，1.1），您可以使用具有 counters() 功能的 CSS計數器。
<ol> <li> My First Item <ol> <li>My Nested First Item</li> <li>My Nested Second Item</li> </ol> </li> <li>My Second Item</li> </ol>
ol {
list-style-type:none;
counter-reset:list;
}
ol li:before {
counter-increment:list;
content: counters(list, ".") ". ";
}注意，我們使用的是 counters() 函數，而不是 counter() 函數。
counters() 函數的第二個(gè)參數是連接字符串。它還可以有第三個(gè)參數來(lái)設置格式（例如，希臘數字或羅馬數字）。
元素，如 <h1>，<h2> 不嵌套在文檔中。它們以不同的元素出現，但仍代表一種層次結構。下面介紹如何將嵌套數字設置到標題中：
body {
counter-reset:h1;
}
h1 {
counter-reset:h2;
}
h1:before {
counter-increment: h1;
content: counter(h1) ". ";
}
h2:before {
counter-increment:h2;
content: counter(h1) "." counter(h2) ". ";
}每次找到<h1>時(shí)，<h2>計數器都會(huì )重置。<h2> 在文檔中獲得的編號和 <h1> 相關(guān)。
值得慶幸的是，CSS 計數器自與 CSS2 一起推出以來(lái)，得到了瀏覽器的廣泛支持。雖然在內容以外的屬性中使用 counter() 函數仍然是實(shí)驗性的，但你可以毫不猶豫地執行本教程中涵蓋的所有例子。
您準備好迎接涉及CSS計數器的簡(jiǎn)單挑戰了嗎？
使用 CSS計數器在 10 行代碼中顯示 1 到 1000 及其羅馬字符。
如果你被難倒了，下面是你如何做到這一點(diǎn)：
要創(chuàng )建 1000 個(gè) div 元素，可以使用以下內容。
for (var i = 0; i < 1000; i++) {
document.body.appendChild( document.createElement("div") );
}CSS計數器:
body {
counter-reset:number;
}
div:before {
counter-increment:number;
content: counter(number) " => " counter(number, lower-roman);
}CSS 計數器在 CSS 中是一個(gè)鮮為人知的功能，但您會(huì )驚訝于它們派上用場(chǎng)的頻率。在此教程中，我們討論了如何以及何時(shí)使用 CSS 計數器，并展示了一些示例。
以下是我們使用的屬性列表。
| 屬性 | 用法 |
|---|---|
| counter-reset | 重置（或創(chuàng )建）給定值計數器（默認0） |
| counter-increment | 通過(guò)給定偏移增加給定計數器（默認值 1） |
| counter(counter-name, counter-format) | 從給定格式獲取計數器的價(jià)值 |
| counters(counter-name, counter-string, counter-format) | 從給定格式獲取嵌套計數器的價(jià)值 |
CSS計數器 雖然很酷。但有一件事需要明白的是，所有計數器都是全局性的。如果你在一個(gè)有很多 CSS 文件的大型項目中使用，你可能無(wú)法找到它們的創(chuàng )建、重置和增量位置。不要過(guò)度使用它們，一定要使用描述性名稱(chēng)的計數器，以避免沖突。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS計數器</title>
<style>
html {
box-sizing: border-box;
font-size: 62.5%;
}
*,
*::before,
*:after {
box-sizing: inherit;
}
body {
font-family: Rambla, sans-serif;
font-size: 2rem;
line-height: 1.5;
color: #03c03c;
}
h1 {
text-align: center;
}
.wrapper {
margin: 0 auto;
width: 85%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
@media (max-width: 1100px) {
.wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
ol {
counter-reset: li;
margin: 20px 0;
padding-left: 0;
}
ol>li {
position: relative;
margin: 0 0 25px 2em;
padding: 4px 8px 4px 20px;
list-style: none;
}
ol>li::before {
content: counter(li);
counter-increment: li;
position: absolute;
top: -2px;
left: -2em;
width: 2em;
margin-right: 8px;
padding: 4px;
font-weight: bold;
text-align: center;
}
li ol,
li ul {
margin-top: 6px;
}
ol ol li:last-child {
margin-bottom: 0;
}
.disc>li::before {
color: white;
background-color: #03c03c;
border-radius: 50%;
}
.circle>li::before {
color: #03c03c;
border: solid 2px #03c03c;
border-radius: 50%;
}
.angle>li::before {
color: #03c03c;
border-right: solid 3px #03c03c;
border-bottom: solid 3px #03c03c;
}
.shadow>li::before {
color: white;
background: #03c03c;
box-shadow: 5px 5px 0 0 greenyellow;
}
.rombo>li {
margin-bottom: 25px;
}
.rombo>li::before {
color: white;
z-index: 2;
}
.rombo>li::after {
position: absolute;
top: -2px;
left: -2em;
width: 2em;
margin-right: 8px;
padding: 4px;
background-color: #03c03c;
height: 2em;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
z-index: 1;
}
.underline>li::before {
border-bottom: solid 3px #03c03c;
}
</style>
</head>
<body>
<h1>Styling Ordered List Numbers</h1>
<div class="wrapper">
<ol class="disc">
<li>Tomato</li>
<li>Cucumber</li>
<li>Onion</li>
<li>Pepper</li>
</ol>
<ol class="circle">
<li>Tomato</li>
<li>Cucumber</li>
<li>Onion</li>
<li>Pepper</li>
</ol>
<ol class="angle">
<li>Tomato</li>
<li>Cucumber</li>
<li>Onion</li>
<li>Pepper</li>
</ol>
<ol class="shadow">
<li>Tomato</li>
<li>Cucumber</li>
<li>Onion</li>
<li>Pepper</li>
</ol>
<ol class="rombo">
<li>Tomato</li>
<li>Cucumber</li>
<li>Onion</li>
<li>Pepper</li>
</ol>
<ol class="underline">
<li>Tomato</li>
<li>Cucumber</li>
<li>Onion</li>
<li>Pepper</li>
</ol>
</div>
<a href="https://css-tricks.com/custom-list-number-styling/">更多例子</a>
</body>
</html>https://css-tricks.com/custom-list-number-styling/
文章地址：https://www.cnblogs.com/dragonir/p/14475600.html 作者：dragonir
聯(lián)系客服
