Egenskapen counter-increment

Egenskapen counter-increment sätter automatisk numrering av element, till exempel, stycken eller rubriker. Används tillsammans med egenskapen counter-reset, pseudoelementen after och before, egenskapen content, inuti vilken funktionen counter används. För bättre förståelse rekommenderar jag att titta på exemplen.

Syntax

cssselektor {
  counter-increment: namn [steg] | none;
}

Värden

Standardvärde: none.

Exempel

Låt oss göra så att stycken numreras automatiskt:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Exempel

Låt förutom numrering läggas till någon annan text. I vårt fall № före siffran och punkt efter:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Exempel

Låt oss börja numreringen från 10. För detta sätter vi räknarens startvärde till nio, det vill säga 1 mindre än vi behöver:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Exempel

Låt nu numreringen ha steg "2". För detta sätter vi tvåan som steg:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* sätter tvåan */
  content: "№" counter(test) ".";
}

Результат:

Exempel

I föregående exempel började numreringen med tvåan, men vi vill gärna ha ettan. Varför hände det så? Eftersom counter-reset återställer räknarens värde till noll, och sedan lägger counter-increment till sitt steg: som standard ettan, därför började tidigare vår numrering från 1. Men nu läggs tvåan till - och numreringen börjar med tvåan.

För att lösa problemet sätter vi start- värdet på räknaren till -1 och nu kommer numreringen att börja från 1 och kommer att ökas med 2:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Se även