CSS的規範中,有一個很奇特的特性,支援計數器的功能。
先來看下如何使用:
<section>
<p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
<p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
<p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
<p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
<p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
</section>
這段代碼表示了做一件事情的順序,現在我們可以使用CSS的計數器來給這些步驟标注順序。
下面的代碼:
body {
counter-reset: steps;
}
p{
color: #242424;
font-size: 16px;
line-height: 20px;
p:before {
counter-increment: steps;
content: "Step " counter(steps) ": ";
font-weight: bold;
font-size: 18px;
}
在浏覽一下看看效果如何?每行之前都有了一個步驟的數字标注,很神奇吧。
這個屬性自CSS2.1起開始寫入規範,目前大多數主流的浏覽器都可以支援,唯一不支援的就是IE7了。
這個特性看起來簡單,但是如果我們能夠合理的使用,效果還是非常好的。
參考資料: