CSS కౌంటర్

Pizza

Hamburger

Hotdogs

CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。

计数器使您可以根据内容在文档中的位置来调整其外观。

带计数器的自动编号

CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

如需使用 CSS 计数器，我们将使用以下属性：

  • counter-reset - కౌంటర్ను సృష్టించండి లేదా పునరుద్ధరించండి
  • counter-increment - కౌంటర్ విలువను పెంచండి
  • content - సృష్టించబడిన కంటెంట్ని చేర్చండి
  • counter() లేదా counters() ఫంక్షన్ - కౌంటర్ విలువను ఎలమెంట్కు చేర్చండి

CSS కౌంటర్లను ఉపయోగించడానికి ముందు మీరు ఉపయోగించవలసిన ఫంక్షన్లను సిద్ధం చేయాలి: counter-reset దానిని సృష్టించండి.

ఈ ఉదాహరణలో, పేజీ (బాడీ సెలెక్టర్లో) కౌంటర్ సృష్టించడానికి మరియు ప్రతి <h2> ఎలమెంట్కు కౌంటర్ విలువను పెంచడానికి మరియు ప్రతి <h2> ఎలమెంట్కు ప్రారంభంలో "విభాగం <కౌంటర్ విలువ>:" చేర్చడానికి ప్రయత్నించండి:

ఉదాహరణ

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "విభాగం " counter(section) ": ";
}

亲自试一试

నార్త్ కౌంటర్లు

ఈ ఉదాహరణలో, పేజీకి (విభాగం) కౌంటర్ సృష్టించడానికి మరియు ప్రతి <h1> ఎలమెంట్కు (ఉపవిభాగం) కౌంటర్ సృష్టించడానికి ప్రయత్నించండి.

"విభాగం" కౌంటర్లు ప్రతి <h1> ఎలమెంట్కు కౌంటర్ చేస్తాయి, "విభాగం" మరియు విభాగం కౌంటర్ల విలువలను స్రవరిస్తాయి, "ఉపవిభాగం" కౌంటర్లు ప్రతి <h2> ఎలమెంట్కు కౌంటర్ చేస్తాయి, విభాగం కౌంటర్ల మరియు ఉపవిభాగం కౌంటర్ల విలువలను స్రవరిస్తాయి:

ఉదాహరణ

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "విభాగం " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

亲自试一试

కౌంటర్లు సమరంజన జాబితాలను సృష్టించడానికి కూడా ఎంతో ఉపయోగపడతాయి, ఎందుకంటే పదినీడి అంశాలలో కౌంటర్ల కొత్త ఉదాహరణలు స్వయంచాలకంగా సృష్టిస్తాయి. ఇక్కడ మేము ఉపయోగిస్తాము: counters() విభాగం స్థాయిలో పరిమితమైన కౌంటర్లకు స్ట్రింగ్ చేర్చుకోవడానికి ఫంక్షన్ ఉపయోగించండి:

ఉదాహరణ

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

亲自试一试

CSS 计数器属性

అట్రిబ్యూట్ వివరణ
content ప్రత్యక్షంగా సృష్టించబడిన కంటెంట్ను జోడించడానికి ::before మరియు ::after సైనికాలను ఉపయోగించండి.
counter-increment ఒకటి లేదా పలు కౌంటర్ల విలువలను పెంచండి.
counter-reset ఒకటి లేదా పలు కౌంటర్లను సృష్టించండి లేదా రీసెట్ చేయండి.