读《CSS世界》小记 4.1.2-6 content计数器

前言

前面的几章都是读完之后才把标题加完整的，因为我不确定都到哪里会有足够的篇幅，但是这一章节直接指定了小节数，懂了吧，这一小节非常非常的长，例子非常非常的多，写这句话时我知识粗略的翻了一遍。开始吧

content-reset

顾名思义，计数器重置，作用是起名字+指定初始值 可以同时初始化多个计数器， 名1 值1 名2 值2 其中都是使用 空格分离，空格分离，空格分离，空格分离

content-increment

计数器增量

counter()

计数输出

上面的概念整理为：

名字的指定规则：正常命名
值的指定规则：尽量为整数，chrome浏览器对小数向下取整，其他的浏览器不识别
普照规则：普照源唯一，普照一次，普照源增加一次指定值。

有counter-increment就有普照，counter可以理解为只是输出

这里贴一个测试过的代码，加强理解：

//html
<p></p>

//css
p{  
	counter-reset: yancy 2;   //普照源：  名字+初始值
	counter-increment: yancy 3;//普照：  名字+增量 （就是一次增加多少，不指定的话默认为1）
}
p::before{
	content: counter(yancy);  //普照一次    counter(普照源名称)
}

//结果就不贴了， 就一个数字 5  （2+3）

到目前位置，我们只接触到了最简单的用法，甚至不能称之为用法，因为它“不完整”
完整的用法是

counter(name, style) //这个style支持list-style-type的所有值

那么怎么用呢？我们之前改变的都是纯数字，整数，通过style我们可以递增罗马符号或者英文字母，只要是style支持的值，都可以进行操作。

<p class="counter"></p>

//css
.counter {
  counter-reset: wangxiaoer 2;  //只要看这个就行了，这个括号中其他的都可以不要
  font-size: 32px; 
  font-family: Arial black; 
  color: #cd0000; 
}
.counter:before,
.counter:after {
  display:block;
  content: counter(wangxiaoer, lower-roman);  //style为罗马字符
  counter-increment: wangxiaoer;  //普照
}

再来个例子，我自己从这个例子中理解到了counter其实和js中的console.log差不多。。。就是个输出

<p class="counter"></p>

//css
.counter { counter-reset: wangxiaoer 2 wangxiaosan 3; }     //同时初始化两个普照源+初始值
.counter:before { 
	counter-increment: wangxiaoer 1  wangxiaosan 2;  //同时指定两个普照的增量，记住 有它就有普照
	 content: counter(wangxiaoer) '\A' counter(wangxiaosan);  //前面已经说过，'\A'是换行，这不是就是换行输出吗。。。
	 white-space: pre; 
}

counters

前面讲的都是counter，这里虽然是加了一个s，但是完全不一样了。

counters(name, string); //基本使用格式
~
参数解释：
string 参数为字符串（需要引号包围的，是必需参数），表示子序号的连接字符串。例如，1.1 的 string 就是’.’，1-1 就是’-’。

贴个原文例子吧

写个我自己的结论，关于嵌套计数的。
下面的标题和markdown语法的一、二级标题类似。
每一级设置一个普照源，每个子元素都要是设置普照(increment)。

//html
<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>


//css
.reset { 
  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before { 
  content: counters(wangxiaoer, '-') '. '; 
  counter-increment: wangxiaoer;
}

使用注意项：输出普照counter的元素必须在普照counter-increment后面，类似先main后nav这样

好吧，其实也没有多长，但是还没有实际的应用^ .^