此文章是vip文章,如何查看?  

1,点击链接获取密钥 http://nicethemes.cn/product/view29882.html

2,在下方输入文章查看密钥即可立即查看当前vip文章


CSS计数器的使用

  • 时间:
  • 浏览:
  • 来源:互联网

很多时候,我们在使用有序列表的时候,自带的序号并不是我们想要的。这是我们可能像自己构造一些有顺序的序号出来,就可以用到counter计数器了!!

我们以下图这样一个列表为例:

<html>
<head>
<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

计数器的使用主要分为三步:

1)初始化计数器(counter-reset:section)

为想要计数的父元素初始化计数器!!即上面代码中的counter-reset:section;  (section这个名字是自己随意取的,这个可以自定义)

2)计数器自增(counter-increment:section;)

自增语句放在想要自增的子元素里;比如section写在<h1>元素前面,我们就可以理解为碰到<h1>就自增;同时subsection写在<h2>元素的前面,则碰到<h2>元素就自增

3)显示计数器(counter:"内容"counter(计数器名称 风格)"内容")

上面括号里的是显示计数器的格式,其中counter(计数器名称 风格)是按照什么样的风格自增,默认是十进制,也可以是罗马数字,比如counter(section upper-roman)..  双引号里面的内容是可选的,可以自己添加,也可以不添加。

如:

<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before 
{
counter-increment:subsection;
content:counter(section) "点" counter(subsection) " ";
}
</style>

按照这样的方式完成三步法即可,而计数器不同的自增方式,可以到时候用的时候查询添加即可!!

 

 

本博客由博主原创,如需转载需说明出处!谢谢支持!

 

本文链接http://element-ui.cn/news/show-577009.aspx