html实现目录序号,使用CSS3自动实现文章标题级别（自动目录 | 自动序号）

CSS

语言：

CSSSCSS

确定

.counter {

counter-reset: index-1;

}

.counter-index-1 {

counter-increment: index-1;

counter-reset: index-2;

}

.counter-index-1::before {

content: counter(index-1)'.';

}

.counter-index-2 {

counter-increment: index-2;

counter-reset: index-3;

}

.counter-index-2::before {

content: counter(index-1)'.'counter(index-2)'.';

}

.counter-index-3 {

counter-increment: index-3;

counter-reset: index-4;

}

.counter-index-3::before {

content: counter(index-1)'.'counter(index-2)'.'counter(index-3)'.';

}

.counter-index-4 {

counter-increment: index-4;

counter-reset: index-5;

}

.counter-index-4::before {

content: counter(index-1)'.'counter(index-2)'.'counter(index-3)'.'counter(index-4)'.';

}

.counter-index-5 {

counter-increment: index-5;

counter-reset: index-6;

}

.counter-index-5::before {

content: counter(index-1)'.'counter(index-2)'.'counter(index-3)'.'counter(index-4)'.'counter(index-5)'.';

}

.counter-index-6 {

counter-increment: index-6;

counter-reset: index-7;

}

.counter-index-6::before {

content: counter(index-1)'.'counter(index-2)'.'counter(index-3)'.'counter(index-4)'.'counter(index-5)'.'counter(index-6)'.';

}

.counter-index-1,

.counter-index-2,

.counter-index-3,

.counter-index-4,

.counter-index-5,

.counter-index-6 {

position: relative;

}

.counter-index-1::before,

.counter-index-2::before,

.counter-index-3::before,

.counter-index-4::before,

.counter-index-5::before,

.counter-index-6::before {

margin-right: .5em;

position: absolute;

right: 100%;

}

html {

font-family: sans-serif;

color: #111;

}

.counter {

max-width: 400px;

margin: auto;

padding: 40px 70px;

}

.counter-index-1 {

color: #2b2b2b;

}

.counter-index-2 {

color: #444444;

}

.counter-index-3 {

color: #5e5e5e;

}

.counter-index-4 {

color: #777777;

}

.counter-index-5 {

color: #919191;

}

.counter-index-6 {

color: #aaaaaa;

}

p {

font-size: .9rem;

line-height: 1.4;

}

code {

background: #eee;

}