列表是Web開發的基本部分，用于以有組織和結構化的方式呈現信息。在HTML中，有3種類型的列表：有序列表、無序列表和定義列表。然而，當我們需要根據要求設計列表時，樣式化這些列表可能會具有挑戰性。CSS提供了@counter-style規則，它允許我們以更靈活和創造性的方式自定義列表項標記。
在本文中，我們將學習如何使用@counter-style規則來使用CSS自定義列表項。@counter-style規則用于定義不屬于預定義樣式集的計數器樣式，并定義如何將計數器值轉換為字符串表示。
什么是@counter-style？
The @counter-style rule is used to define a counter style that can be used in conjunction with the CSS counter property. This rule is used to define a custom list item marker style. The counter property allows us to increment or decrement a counter, which is used to generate content for pseudo-elements like :before and :after.
語法
@counter-style name {
// write all the CSS styles properties and values
}
登錄后復制
The name parameter is used to specify the name of the counter style that we are defining. Within the curly braces, we can define a set of properties and values that control the appearance of the counter. Some of the properties that we can use include ?
System ? 它指定要使用的編號系統，例如十進制、小寫字母、大寫羅馬數字等。
符號 – 它指定了計數器每個級別使用的符號。
后綴 ? 它指定在計數器值之后添加的后綴。
Prefix ? It specifies the prefix to add before the counter value.
Pad ? 它指定在顯示計數器值時要使用的最小位數。
Steps to use @counter-styles Rule in CSS
以下是在CSS中使用@counter-styles規則的步驟 –
Step 1: Create an Ordered List
第一步是創建一個有序列表，并使用我們自己的列表項標記進行自定義。在下面的示例中，我們希望使用羅馬數字而不是默認的編號系統。以下是我們列表的HTML代碼 ?
<ol> <li>Learn to code in python</li> <li>Learn to code in java</li> <li>Learn to code in c++</li> </ol>
登錄后復制
Step 2: Define the @counter-style
@counter-style my-numerals {
system: upper-roman;
symbols: I II III IV V VI VII VIII IX X;
}
登錄后復制
In the above code, we have defined a counter style named my-numerals and set the system property to upper-roman which means the counter will be set to use the uppercase Roman numerals in the list. Apart from this, we have also set the symbol’s property to a string of Roman numerals from I to X.
Step 3: CSS Styles
ol {
counter-reset: section;
}
li {
counter-increment: section;
list-style: none;
}
li:before {
content: counter(section, my-numerals) ". ";
margin-right: 10px;
}
登錄后復制
在上述代碼中，counter-reset屬性被設置為ol元素的section，這意味著計數器將從0開始。在這里，我們還為每個li元素設置了counter-increment屬性的section。
Example 1
的翻譯為：
示例1
<html>
<head>
<title>Example to use @counter-style to customize the List Item Markers using CSS</title>
<style>
/* Defining a custom counter style to have the list as upper roman numerals */
@counter-style roman-numerals {
system: upper-roman;
symbols: I II III IV V VI VII VIII IX X;
}
/* applying the custom counter style to the ordered list */
ol {counter-reset: section; }
/* incrementing the counter for each list item */
li {counter-increment: section; list-style: none;}
/* using the counter value to display the custom list item marker */
li:before {
content: counter(section, roman-numerals) ". ";
margin-right: 8px;
color: green;
font-size: 15px;
}
</style>
</head>
<body>
<h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
<p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
<ol>
<li>Learn to code in python</li>
<li>Learn to code in java</li>
<li>Learn to code in c++</li>
</ol>
</body>
</html>
登錄后復制
In the example above, we have defined a custom counter style named my-roman using the @counter-style rule. Here, we have set the system property to upper-roman to use the uppercase Roman numerals and also set the symbol’s property to a string of Roman numerals from I to X.
在此之后，我們使用counter-reset屬性將自定義計數器樣式應用于有序列表，并使用counter-increment屬性為每個列表項遞增計數器，并使用list-style屬性移除了默認的列表項標記。
最后，為了使用羅馬數字顯示自定義列表項標記，我們使用了:before偽元素，通過content屬性和counter函數（有兩個參數：計數器的名稱（在本例中為section）和計數器樣式的名稱（在本例中為roman-numerals））。
Example 2
的中文翻譯為：
示例2
<html>
<head>
<title>Example to use @counter-style to customize the List Item Markers using CSS</title>
<style>
/* removing the default list item markers */
ul { list-style: none;}
/* using images as list item markers */
li:before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
background-image: url("yourimage.png");
background-repeat: no-repeat;
margin-right: 8px;
}
</style>
</head>
<body>
<h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
<p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
<ol>
<li>Learn to code in python</li>
<li>Learn to code in java</li>
<li>Learn to code in c++</li>
</ol>
</body>
</html>
登錄后復制
在上面的示例中，我們使用了list-style屬性來刪除無序列表元素的默認列表項標記。此外，我們還使用了:before偽元素來顯示列表項，借助content屬性和空字符串。
我們已將display屬性設置為inline-block，以確保圖像正確顯示，并將寬度和高度屬性設置為標記圖像的大小。我們使用background-image屬性指定標記圖像的URL，并使用background-repeat屬性防止圖像重復。最后，我們使用margin-right屬性在圖像右側添加了一些邊距。
Conclusion
在處理HTML列表時，可以使用CSS中的@counter-style規則來自定義列表項標記的外觀。這個規則提供了一種簡單而靈活的方式來定義有序列表的自定義樣式。@counter-style規則的語法包括幾個參數，如system、symbols、suffix、prefix和pad。這些參數允許對列表項標記的外觀進行修改。使用@counter-style規則，可以更輕松地創建與當前項目設計需求相匹配的列表項標記。
以上就是如何使用 @counter-style 規則使用 CSS 自定義列表項？的詳細內容，更多請關注www.92cms.cn其它相關文章！
