資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何將內容設定為計數器？
通常，我們使用 JavaScript 將動態內容設定為網頁上內容的計數器。但在這篇文章中，我們將學習如何使用 CSS 計數器屬性將內容設定為計數器。可以透過在 `before` 或 `after` 偽選擇器內使用計數器屬性來將內容設定為計數器。
現在讓我們看看我們可以用來使用 CSS 將內容設定為計數器的計數器屬性。
CSS 計數器就像其他語言中的變數一樣。我們可以使用 CSS 規則或屬性遞增它們的值。讓我們看看如何使用以下屬性建立、遞增並將內容設定為計數器。
`counter-reset` − 此 CSS 屬性將建立或重置計數器。
`counter-increment` − 我們可以使用此 CSS 屬性來遞增計數器值。
`content` − 這是在偽選擇器內用於在元素之前或之後設定內容的屬性。
`counter()` 方法 − `counter()` 方法會將計數器的值新增到內容元件中。
語法
下面的語法將向您展示如何將所有這些屬性一起使用以使用 CSS 將內容設定為計數器：
parent-element selector {
counter-reset: name; // It will create or reset the CSS counter with the given name
}
child-element :: before / after {
counter-increment: name; // increment the counter with the given name
content: counter(name); // It will set the content as counter
}
現在讓我們透過實際使用程式碼示例來詳細瞭解上述屬性。
步驟
步驟 1 − 在第一步中，我們將向 HTML 文件中新增一個包含所有巢狀 div 容器的父 div 容器和一個類。
步驟 2 − 在下一步中，我們將建立內部 div 容器或上一步中建立的 div 元素的子容器。
步驟 3 − 在最後一步中，我們將按照上面所示的語法，使用上述屬性以及父元素和子元素。
示例
下面的示例將解釋如何使用上面指定的語法中指定的 CSS 屬性將內容設定為任何元素的計數器：
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div{
border: 2px solid red;
counter-reset: myDivs;
}
.inner-div{
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.inner-div::after{
counter-increment: myDivs;
content: counter(myDivs);
}
</style>
</head>
<body>
<center>
<h2>Set the content as a counter</h2>
<p>The numbering to below content is set using the content as counter with CSS.</p>
<div class = "outer-div">
This is main outer div container.
<div class = "inner-div"> This is inner div No. </div>
<div class = "inner-div"> This is inner div No. </div>
<div class = "inner-div"> This is inner div No. </div>
<div class = "inner-div"> This is inner div No. </div>
<div class = "inner-div"> This is inner div No. </div>
</div>
</center>
</body>
</html>
在此示例中，我們將內容設定為主容器的直接子元素的計數器。我們使用 `counter-reset` 屬性建立了一個計數器，然後分別使用 `counter-increment` 和 `content` 屬性遞增它並將其設定為內容。
讓我們看看另一個程式碼示例，在這個示例中，我們還將內容設定為內部巢狀 div 的子元素的計數器。
此示例的方法與上一個示例的演算法幾乎相同。您只需要在具有 `inner-div` 類的元素內新增更多子元素，為它們啟動一個新的計數器，並將其設定為這些子元素的內容。
示例
下面的示例將說明上述演算法以及對上一個示例的更改，以便將計數器設定為巢狀的 div 元素：
<!DOCTYPE html>
<html lang = "en">
<head>
<style>
.outer-div{
border: 2px solid red;
counter-reset: myDivs;
}
.inner-div{
border: 1px solid green;
counter-reset: innermostDivs;
margin: 5px;
padding: 5px;
}
.inner-div::before{
counter-increment: myDivs;
content: counter(myDivs) ".";
}
.innermost-div::after{
counter-increment: innermostDivs;
content: counter(innermostDivs);
}
</style>
</head>
<body>
<center>
<h2>Set the content as a counter</h2>
<p>The numbering to below content is set using the content as counter with CSS.</p>
<div class = "outer-div">
This is main outer div container.
<div class = "inner-div"> This is the first nested inner div layer. </div>
<div class = "inner-div"> This is the first nested inner div layer. </div>
<div class = "inner-div">
This is the first nested inner div layer.
<div class = "innermost-div"> This is innermost div No. </div>
<div class = "innermost-div"> This is innermost div No. </div>
<div class = "innermost-div"> This is innermost div No. </div>
</div>
<div class = "inner-div"> This is the first nested inner div layer. </div>
<div class = "inner-div">
This is the first nested inner div layer.
<div class = "innermost-div"> This is innermost div No. </div>
<div class = "innermost-div"> This is innermost div No. </div>
<div class = "innermost-div"> This is innermost div No. </div>
</div>
</div>
</center>
</body>
</html>
在上例中，我們使用兩個不同的計數器將內容設定為主容器的直接子元素以及這些子元素的子元素的計數器，並在每個子元素之前和之後設定數字。
結論
在這篇文章中，我們學習瞭如何使用不同的 CSS 屬性將內容設定為計數器，並透過不同的程式碼示例詳細瞭解它們。我們透過兩個不同的程式碼示例討論並理解了這種方法。在前一個示例中，我們在主容器的直接子元素之後設定了數字。而在後一個示例中，我們使用相同的方法將內容設定為主容器的子元素及其子元素的計數器。
99 次瀏覽
