html – 如何停止标签干扰计数器?
在下面的代码中,我需要使用
HTML顶部的div标签进行样式化.没有div标签到位,hx标签的轮廓编号正确,但是在所有的div都完全错误.我需要
this工作像
this,但是div标签仍然存在,我需要它为具有不同id的div工作.有任何想法吗?
body {counter-reset: h1} h1 {counter-reset: h2} h2 {counter-reset: h3} h1:before {counter-increment: h1; content: counter(h1) ". "} h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "} h3:before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "} <div class="varies"> <h1>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h1> </div> <p>Morbi efficitur nibh metus,a vehicula mauris tristique ac. Duis ornare metus eget iaculis hendrerit.</p> <h2>Morbi nisi lacus,ultricies sit amet turpis a,aliquet congue nulla.</h2> <p>Duis eget facilisis nisl.</p> <h3>Donec tincidunt purus quam,ut accumsan lorem hendrerit a.</h3> <p>Aenean in mattis quam.</p> <h3>Maecenas a nulla sit amet ligula facilisis tincidunt lacinia non enim.</h3> <p>Aliquam dignissim turpis placerat,facilisis magna et,venenatis purus.</p> <h2>Suspendisse tempus eu elit nec malesuada.</h2> <p>In ut sollicitudin nisi. Praesent non porttitor ante,molestie scelerisque mauris.</p> <h2>Vivamus eu turpis efficitur,ornare risus in,consectetur tellus.</h2> <p>Cras pellentesque orci eu placerat mollis.</p> <h1>Duis eu nulla et tellus porttitor auctor.</h1> 解决方法
可以通过看看
W3C specs关于创建计数器,其范围和继承的内容来详细解释行为的原因.
为什么没有div的代码段工作? 在工作片段(没有div的人)中,发生了以下情况: > counter.h1(添加一个前缀来区分元素)在body上创建(或重置),其初始值设置为0. body {counter-reset: h1} h1 {counter-reset: h2} h2 {counter-reset: h3} h1:before {counter-increment: h1; content: counter(h1)". "} h2:before {counter-increment: h2; content: counter(h1)"." counter(h2)". "} h3:before {counter-increment: h3; content: counter(h1)"." counter(h2)"." counter(h3)". "} <!-- body creates counter.h1 and set to 0 --> <h1>Heading 1 <!-- Inherits counter.h1 from parent,creates counter.h2 and set to 0 --> <!-- ::before being a child inherits all counters from parent,increments counter.h1 to 1 and displays value --> </h1> <p>Paragraph</p> <h2>Heading 2 <!-- Inherits counter.h1,counter.h2 from sibling,creates counter.h3 and set to 0 --> <!-- ::before being a child inherits all counters from parent,increments counter.h2 to 1 and displays value --> </h2> <p>Paragraph</p> <h3>Heading 3 <!-- Inherits counter.h1,counter.h2,counter.h3 --> <!-- ::before being a child inherits all counters from parent,increments counter.h3 to 1 and displays value --> </h3> <p>Paragraph</p> <h3>2nd Heading 3 <!-- Inherits counter.h1,increments counter.h3 to 2 and displays value --> </h3> <p>Paragraph</p> <h2>2nd Heading 2 <!-- Inherits counter.h1,counter.h3,resets counter.h3 to 0 --> <!-- ::before being a child inherits all counters from parent,increments counter.h2 to 2 and displays value --> </h2> <p>Paragraph</p> <h2>3rd Heading 2 <!-- Inherits counter.h1,increments counter.h2 to 3 and displays value --> </h2> <p>Paragraph</p> <h1>2nd Heading 1 <!-- Inherits counter.h1,resets counter.h2 to 0 --> <!-- ::before being a child inherits all counters from parent,increments counter.h1 to 2 and displays value --> </h1> 为什么div的片段不起作用? 现在让我们来看看那个不起作用的片段(h1在div里面). >这里,h1创建counter.h2,但这只能由h1的兄弟姐妹继承(其中没有). body {counter-reset: h1} h1 {counter-reset: h2} h2 {counter-reset: h3} h1:before {counter-increment: h1; content: counter(h1)". "} h2:before {counter-increment: h2; content: counter(h1)"." counter(h2)". "} h3:before {counter-increment: h3; content: counter(h1)"." counter(h2)"." counter(h3)". "} <!-- body creates counter.h1,sets it to 0 --> <div class="test"> <!-- Inherits counter.h1 from parent --> <h1>Heading 1 <!-- Again inherits counter.h1 from parent,creates counter.h2 --> <!-- ::before increments counter.h1 to 1 and display value--> </h1> </div> <p>Paragraph</p> <h2>Heading 2 <!-- Inherits counter.h1 as it is from parent but not counter.h2,creates counter.h3 --> <!-- ::before has no counter.h2,so creates a counter.h2 and increments to 1 --> </h2> <p>Paragraph</p> <h3>Heading 3 <!-- Inherits counter.h1 as it is from parent,couunter.h3 from sibling but not counter.h2 --> <!-- ::before inherits counter.h3 from parent and increments to 1,has no counter.h2 so creates a new counter.h2 and sets to 0 --> </h3> <p>Paragraph</p> <h3>2nd Heading 3 <!-- Inherits counter.h1 as it is from parent,couunter.h3 from sibling but not counter.h2 --> <!-- ::before inherits counter.h3 from parent and increments to 2,has no counter.h2 so creates a new counter.h2 and sets to 0 --> </h3> <p>Paragraph</p> <h2>2nd Heading 2 <!-- Inherits counter.h1 as it is from parent,couunter.h3 from sibling but not counter.h2,resets counter.h3 to 0 --> <!-- ::before has no counter.h2,so creates a counter.h2 and increments to 1 --> </h2> <p>Paragraph</p> <h2>3rd Heading 2 <!-- Inherits counter.h1 as it is from parent,so creates a counter.h2 and increments to 1 --> </h2> <p>Paragraph</p> <h1>2nd Heading 1 <!-- Inherits counter.h1 as it is from parent,resets counter.h2 to 0 --> <!-- ::before inherits counter.h1 from parent and increments to 2 --> </h1> 解决办法是什么? 这个问题的理想解决方案是首先在身体本身重置所有3个计数器,以便所有元素都知道计数器的存在,并可以继承或使用它的值. body {counter-reset: h1 h2 h3} h1 {counter-reset: h2 h3} h2 {counter-reset: h3} h1:before {counter-increment: h1; content: counter(h1)". "} h2:before {counter-increment: h2; content: counter(h1)"." counter(h2)". "} h3:before {counter-increment: h3; content: counter(h1)"." counter(h2)"." counter(h3)". "} <!-- body creates counter.h1,counter.h3 sets all 0 --> <div class="test"> <!-- Inherits all 3 counters --> <h1>Heading 1 <!-- Inherits all 3 counters,resets counter.h2 and counter.h3 to 0 --> <!-- ::before also inherits all 3 counters,increments counter.h1 to 1 and displays value --> </h1> </div> <p>Paragraph</p> <h2>Heading 2 <!-- Inherits all 3 counters,resets counter.h3 to 0 --> <!-- ::before also inherits all 3 counters,increments counter.h2 to 1 and displays value --> </h2> <p>Paragraph</p> <h3>Heading 3 <!-- Inherits all 3 counters --> <!-- ::before also inherits all 3 counters,increments counter.h3 to 1 and displays value --> </h3> <p>Paragraph</p> <h3>2nd Heading 3 <!-- Inherits all 3 counters --> <!-- ::before also inherits all 3 counters,increments counter.h3 to 2 and displays value --> </h3> <p>Paragraph</p> <h2>2nd Heading 2 <!-- Inherits all 3 counters,increments counter.h2 to 2,resets counter.h3 to 0 and displays value --> </h2> <p>Paragraph</p> <h2>3rd Heading 2 <!-- Inherits all 3 counters,increments counter.h2 to 3,resets counter.h3 to 0 and displays value --> </h2> <p>Paragraph</p> <h1>2nd Heading 1 <!-- Inherits all 3 counters,resets counter.h2 and counter.h3 to 0 --> <!-- ::before also inherits all 3 counters,increments counter.h1 to 2,resets counter.h2,counter.h3 to 0 and displays value --> </h1> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |