數字序列是一種常見的排版方式,它可以快速展示一組有序的數據。對于使用ol(有序列表)標簽進行標記的內容,我們可以通過 CSS 樣式屬性來修改數字序列顯示的方式。
ol { list-style: none; counter-reset: my-counter; } ol li:before { content: counter(my-counter); counter-increment: my-counter; display: inline-block; width: 20px; text-align: right; margin-right: 5px; }
代碼中的list-style: none;
將有序列表的默認樣式去掉,counter-reset: my-counter;
則是將計數器初始值設置為0。其中my-counter
是自定義的計數器名字,在后續的代碼中將會多次使用。
接下來是對 ol li 子元素前的數字進行樣式修飾的 CSS 屬性。使用:before
偽類可以在li
元素前插入內容表現為數字顯示。content: counter(my-counter);
就是將計數器的值插入到li:before
中,counter-increment: my-counter;
則使得每次插入后計數器加一。
最后,樣式中的display: inline-block;
和width: 20px;
以及text-align: right;
和margin-right: 5px;
則是對數字的樣式進行修飾,以便實現自定義的數字序列。
上一篇html5的源代碼
下一篇oracle css日志