当前位置: 首页 > 面试题库 >

CSS伪元素计数器:可以增加字母“ a”,“ b”,“ c”等而不是数字吗?

酆浩邈
2023-03-14
问题内容

您可以使用以下代码来增加伪元素中的数字。

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
}
H1 {
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

有没有一种方法可以使用相同的代码来递增字母,例如“ a”,“ b”,“ c”等?

谢谢!


问题答案:

是的,的第二个参数counter()定义了使用的计数器的类型,例如list-style-type来自常规ul或的ol;例如:

content: counter(chapter, lower-alpha);



ul {

  counter-reset: listStyle;

}

ul li {

  margin-left: 1em;

  counter-increment: listStyle;

}

ul li::before {

  margin-right: 1em;

  content: counter(listStyle, lower-alpha);

}


<ul>

  <li>one</li>

  <li>two</li>

  <li>three</li>

</ul>

其他包括:decimaldecimal-leading-zerolower-romanupper-romanlower- greeklower-latinupper-latinarmeniangeorgianlower-alphaupper- alpha

由于上面的样式列表似乎有所更新,我选择添加一个代码段,该代码段使用户可以从(当前)可用选项中进行选择,以及一个“输出”区域,以显示如何在CSS生成内容中使用该样式:

let select = document.querySelector('select'),

  output = document.querySelector('#currentCounter'),

  changeEvent = new Event('change');



select.addEventListener('change', function() {

  document.body.style.setProperty('--listStyleType', this.value);

  output.textContent = this.value;

});



select.dispatchEvent(changeEvent);


body {

  --listStyleType: decimal;

}



ul {

  counter-reset: listStyle;

  columns: 2;

  margin-top: 0.5em;

  list-style-type: none;

}



ul li {

  counter-increment: listStyle;

}



ul li::before {

  content: counter(listStyle, var(--listStyleType));

  display: inline-block;

  margin-right: 0.5em;

  width: 1.5em;

  height: 1.5em;

  line-height: 2em;

  text-align: center;

}



code {

  display: block;

  white-space: pre-wrap;

  width: 80%;

  box-sizing: border-box;

  margin: 1em auto;

  padding: 0.5em;

  box-shadow: 0 0 0 3px limegreen;

}



code::after {

  content: '\A';

}



#currentCounter {

  color: #f90;

}


<label for="counterChoice">Please select a CSS counter:</label>

<select id="counterChoice">

  <option value="arabic-indic">arabic-indic</option>

  <option value="armenian">armenian</option>

  <option value="bengali">bengali</option>

  <option value="cambodian">cambodian</option>

  <option value="circle">circle</option>

  <option value="cjk-decimal">cjk-decimal</option>

  <option value="cjk-earthly-branch">cjk-earthly-branch</option>

  <option value="cjk-heavenly-stem">cjk-heavenly-stem</option>

  <option value="decimal">decimal</option>

  <option value="decimal-leading-zero">decimal-leading-zero</option>

  <option value="devanagari">devanagari</option>

  <option value="disc">disc</option>

  <option value="disclosure-closed">disclosure-closed</option>

  <option value="disclosure-open">disclosure-open</option>

  <option value="ethiopic-numeric">ethiopic-numeric</option>

  <option value="georgian">georgian</option>

  <option value="gujarati">gujarati</option>

  <option value="gurmukhi">gurmukhi</option>

  <option value="hebrew">hebrew</option>

  <option value="hiragana">hiragana</option>

  <option value="hiragana-iroha">hiragana-iroha</option>

  <option value="japanese-formal">japanese-formal</option>

  <option value="japanese-informal">japanese-informal</option>

  <option value="kannada">kannada</option>

  <option value="katakana">katakana</option>

  <option value="katakana-iroha">katakana-iroha</option>

  <option value="khmer">khmer</option>

  <option value="korean-hangul-formal">korean-hangul-formal</option>

  <option value="korean-hanja-formal">korean-hanja-formal</option>

  <option value="korean-hanja-informal">korean-hanja-informal</option>

  <option value="lao">lao</option>

  <option value="lower-alpha">lower-alpha</option>

  <option value="lower-alpha">lower-alpha</option>

  <option value="lower-armenian">lower-armenian</option>

  <option value="lower-greek">lower-greek</option>

  <option value="lower-latin">lower-latin</option>

  <option value="lower-roman">lower-roman</option>

  <option value="malayalam">malayalam</option>

  <option value="mongolian">mongolian</option>

  <option value="myanmar">myanmar</option>

  <option value="oriya">oriya</option>

  <option value="persian">persian</option>

  <option value="simp-chinese-formal">simp-chinese-formal</option>

  <option value="simp-chinese-informal">simp-chinese-informal</option>

  <option value="square">square</option>

  <option value="tamil">tamil</option>

  <option value="telugu">telugu</option>

  <option value="thai">thai</option>

  <option value="tibetan">tibetan</option>

  <option value="trad-chinese-formal">trad-chinese-formal</option>

  <option value="trad-chinese-informal">trad-chinese-informal</option>

  <option value="upper-alpha">upper-alpha</option>

  <option value="upper-armenian">upper-armenian</option>

  <option value="upper-latin">upper-latin</option>

  <option value="upper-roman">upper-roman</option>

</select>

<ul>

  <li>one</li>

  <li>two</li>

  <li>three</li>

  <li>four</li>

  <li>five</li>

  <li>six</li>

  <li>seven</li>

  <li>eight</li>

  <li>nine</li>

  <li>ten</li>

</ul>



<code>

  li::before {

    content: counter(&lt;counterName&gt;, <span id="currentCounter"></span>)

  }

</code>

当前可用(截至2017年2月27日):

  • arabic-indic
  • armenian
  • bengali
  • cambodian
  • circle
  • cjk-decimal
  • cjk-earthly-branch
  • cjk-heavenly-stem
  • decimal
  • decimal-leading-zero
  • devanagari
  • disc
  • disclosure-closed
  • disclosure-open
  • ethiopic-numeric
  • georgian
  • gujarati
  • gurmukhi
  • hebrew
  • hiragana
  • hiragana-iroha
  • japanese-formal
  • japanese-informal
  • kannada
  • katakana
  • katakana-iroha
  • khmer
  • korean-hangul-formal
  • korean-hanja-formal
  • korean-hanja-informal
  • lao
  • lower-alpha
  • lower-alpha
  • lower-armenian
  • lower-greek
  • lower-latin
  • lower-roman
  • malayalam
  • mongolian
  • myanmar
  • oriya
  • persian
  • simp-chinese-formal
  • simp-chinese-informal
  • square
  • tamil
  • telugu
  • thai
  • tibetan
  • trad-chinese-formal
  • trad-chinese-informal
  • upper-alpha
  • upper-armenian
  • upper-latin
  • upper-roman


 类似资料:
  • 问题内容: 例如由于Dense_Rank函数调用(在MS Sql中),是否有可能获得字母(如A,B)而不是数字(1,2)? 问题答案: 试试这个: 请注意,当您达到27(past )时,事情将变得有趣而无用。 如果您想开始将字母加倍,那么它将变得有些棘手。这适用于所有版本的SQL Server。这些子句只是CASE语句的替代(每个短2个字符)。 在SQL Fiddle上观看现场演示 (适用于SQL

  • 本文向大家介绍计算三元组(a,b,c)的数量,以使C ++中a ^ 2 + b ^ 2 = c ^ 2和1 <= a <= b <= c <= n,包括了计算三元组(a,b,c)的数量,以使C ++中a ^ 2 + b ^ 2 = c ^ 2和1 <= a <= b <= c <= n的使用技巧和注意事项,需要的朋友参考一下 我们得到一个整数n。目标是找到满足条件的三元组(3个数字一组)- a 2

  • 我正在运行测试的类: 测试课程: 当我用一个通过的数字运行测试时,它工作正常,但是当我把它换成不同的东西时,例如69,我得到的是数值,而不是字母: 实际值不应该是D,而应该是F吗?我做错了什么?我正在看这个教程,在15:38,他把它们作为字母而不是数字。

  • 我试图在talend中找到一种方法来生成一个字母数字计数器,该计数器以以下方式创建数字:YYXXXXXXXX 哪里 null 我们一年中能容纳的最后一个id将是20zzzzzzzz 这怎么做?

  • 问题是要找出A和B(包括A和B)之间的数字总数等于S。 同时打印A和B(含)之间的最小数字。 输入: 由A、B、S组成的单线。 输出: 两行。 在第一行中,A和B之间的整数数,其位数之和等于S。 在第二行中,A和B之间的最小数字。 约束: 1. 1. 来源:黑客地球 我的解决方案只适用于30%的输入。对此最好的解决方案是什么? 我现在使用的算法计算最小数字的和,然后在十位数的每次更改后再次计算和。

  • 本文向大家介绍在数组中找到四个元素a,b,c和d,以便在C ++中a + b = c + d,包括了在数组中找到四个元素a,b,c和d,以便在C ++中a + b = c + d的使用技巧和注意事项,需要的朋友参考一下 假设我们有一个整数列表。我们的任务是找到四个不同的整数,分别为(a,b)和(c,d)两对,这样a + b = c + d。如果有多个答案,则仅打印一个。假设数组元素像:A = [7