了解CSS计数器及其用例

>某些CSS功能我们可能不经常使用。我认为CSS计数器对我们大多数人都属于该类别，很可能有两个原因：>

他们似乎没有很多用例。
1. 编写它们的代码有点复杂。
>
>我最近看到了一个用于计数器的实际用例，所以我认为我会在此处提供简短的速成课程，并在此处分享该用例。

钥匙要点

> CSS计数器提供CSS中的动态编号，从而允许非连续项目编号，可以重新排序而无需手动调整编号。这是通过使用伪元素和针对特定的CSS来实现的。

>
• 尽管最初的复杂性，CSS计数器一旦了解了CSS的伪元素的概念。虽然生成的内容可能会引起可访问性问题，但大多数浏览器都支持它，并且屏幕阅读器识别。 在W3C的Selectors 4级规格中可以看到
用于CSS计数器的实用用例，其中用来编号“问题”和“示例”，并散布在内容中。这允许在自动更新编号时轻松添加，删除或重新排序项目。
• >
• > CSS计数器中的速成课程

> CSS计数器允许您使用动态编号在CSS中进行编号，类似于有序列表的工作方式。但是CSS计数器完全不同。此功能使用伪元素与某些针对特定的CSS相结合，将动态“计数”附加到指定的元素集。>。

这是一个代码示例，类似于我将在本文结尾处的演示中使用的代码示例：

>第一个声明块定义了计数的范围。这意味着我的计数器只会在具有.Container类的元素中增加。我选择了一个称为“问题”的自定义标识符，这是将容器链接到所计数元素所必需的。

第二个声明块使用以下方式：伪元素之前（我可以使用：之后，但在计数器中很少）和内容属性来预留定义的内容。

<span><span>.container</span> {
</span>  <span>counter-reset: issues 0;
</span><span>}
</span>
<span><span>.issue:before</span> {
</span>  <span>counter-increment: issues 1;
</span>  <span>content: "Issue " counter(issues, decimal);
</span>  <span>display: block;
</span><span>}</span>

作为内容属性值的一部分，我正在使用counter（）函数以及一个字符串，类似于在JavaScript或其他更典型的编程语言中可以完成的操作。 counter（）函数采用两个参数：前面定义的计数器标识符（在这种情况下为“问题”）和计数器样式，它们可以是在有序列表中用于列表式式属性属性的任何值。默认值是“十进制”，我在此示例中使用了。

>

如果您仍然感到困惑，则该迷你信息图可能会有所帮助：>

>如果还不够

> CSS计数器：柜台和朋友（令人印象深刻的网）
• >
>如何从CSS生成的内容和计数器（Smashing Magazine）中受益
> CSS计数器样式级别3（W3C规格）
• >

最后一个链接是计数器规格的编辑草案，它引入了一些全新的反相关功能，这些功能可能没有太多（如果有的话）浏览器支持，并且可能在该规范的将来版本中受到风险。但是，我在本文中使用的功能是跨浏览器，返回IE8。

确定CSS计数器的值

从表面上看，首先考虑实施CSS计数器时出现了两个主要问题：

>订购的列表已经这样做，所以为什么我需要一个如此复杂的功能才能数字项目？

生成的内容无法访问，这是将内容与演示文稿混合。>

1. >这两个问题中的第一个实际上不是一个问题。如果要编号的连续项目，则使用有序列表（即带有嵌套
2. 元素的
   ）是合适的。但是CSS计数器不用于编号连续项目。它们用于编号非连续项目，无论它们可能在DOM中，然后能够重新排序，而无需更改每个预备的数字。
>此外，尽管乍一看，柜台可能会有些复杂，但一旦您掌握了CSS的伪元素的概念，但它们确实并不难修改和维护。
3. >与可访问性有关的另一个问题似乎并不像过去那样大问题。莱尼·沃森（LéonieWatson）的一篇文章得出结论：

“ [g]充满活力的内容是在大多数浏览器中支持的可访问性，并得到屏幕读取器的认可。

但是，支持不是100％的支持，因此我要说的是，如果您要使用伪元素生成内容，则“内容”应该具有装饰价值，对理解或功能至关重要它包含在网站上。考虑到这种平衡的方法，在某些情况下，应该使用以下所述的计数器。

一个简单的用例

最近，我正在研究W3C的Selectors级别4规格，并指出它们在内容中散布着“问题”和“示例”。我之前已经看过这一点，但是直到那时，我才决定对其进行一些调查。这些元素是编号的，所以我想知道它们如何能够添加和删除它们，而无需每次重新定位整个设置。我认为这可能是一个脚本，或者在后端或类似的东西上生成。

>

nope。他们使用的是CSS计数器，如下屏幕截图所示：>

在他们的页面中，他们有编号的问题（红色框）和编号示例（黄色框）。使用每个计数集的自定义标识符，它们可以轻松添加，删除甚至重新排序项目，CSS会自动将正确的数字添加到项目中。

>此外，这些规格页面还包括页面末尾的问题索引，该索引使用与问题相同的计数器标识符，但在新的范围中，因此它开始了计数。重复的问题列表确实创造了更多的工作来维持问题，但是，只要订单与内容主体中的更改相匹配，订单通常很容易维护。>>>>>

>拖放演示

>我已经重新创建了W3C的示例，以便您可以解决计数器的工作方式，同时也可以查看以这种方式创建动态列表的容易，从只有HTML和CSS的非标准项目来创建动态列表。

请参见Pen 20FE8F19AE48C210DA6C5DF78C0CF6F8 by sitepoint（@sitepoint）（@sitepoint）。 在演示中，我正在使用Jqueryui的可排序功能来拖动页面上的任何段落，包括“问题”和“示例”框。请注意，数字如何根据项目的拖动位置而变化（尽管在拖动过程中数字的行为似乎有些古怪）。我还在底部包括了一个重复的“问题列表”，例如在W3C的页面上。

结论

>这应该使CSS计数器可以使用哪些方法更清楚。想想任何经常被编辑的文档，甚至可能在可以重新分组或重新排序项目的地方生成的用户生成的内容。而且，如前所述，当编号对内容的理解和源中的项目不贴上至关重要时，这些计数器最有可能有用。

>

如果您看过以其他有用方式使用的CSS计数器，请在评论中告诉我们。

经常询问有关CSS计数器的问题（常见问题解答）

CSS计数器的不同类型是什么？

CSS计数器有两种类型：“ Counter”和“ Counters”。 “计数器”类型用于单层计数器，例如文档中的编号标题。另一方面，“计数器”类型用于多级计数器，例如部分内部的子段。两种类型均与CSS中的“内容”属性一起使用以显示计数器的值。>

>如何使用“计数器”属性重置CSS计数器？此属性设置了任何给定号码的计数器。例如，“反序列：部分;”将“部分”计数器重置为零。您还可以设置针对不同数字的反击，例如“反静音：第5节；”，将“章节”计数器重置为五。

我可以使用列表的CSS计数器吗？

>是的，可以将CSS计数器与列表一起使用。当您想自定义列表项目的编号时，这特别有用。您可以使用“反静音”和“反插入”属性来控制编号，而“ content”属性显示了计数器的值。 CSS计数器生成的数字可以像CSS中的任何其他文本一样进行样式。您可以使用诸如“颜色”，“字体大小”，“字体重量”等属性来设置数字。当“内容”属性生成时，该样式将应用于数字。

我可以使用CSS计数器到编号表吗？

是的，可以使用CSS计数器来编号表。这可以通过在“表”元素上使用“反序”属性，“ tr”元素上的“反税”属性以及“ tre”元素上的“反税”属性以及“'''或'之前的“ content”属性 - “ tr”元素中的元素。

>如何使用CSS计数器创建多级计数器？ CSS。此功能需要两个参数：计数器的名称和一个字符串用作级别之间的分离器。例如，'content：counters（“。”）;将创建一个具有分离器时期的多级计数器。

我可以使用带有伪元素的CSS计数器吗？是的，CSS计数器通常与“之前”和“后”元素元素一起使用。用于显示计数器值的“ content”属性只能与这些伪元素一起使用。

>

>如何增加CSS计数器？使用“反插入”属性进行递增。每次调用计数器的价值都会增加一个属性。例如，“反合：部分；”将“部分”计数器增加一个。 。这可以通过将“反静音”或“反插入”属性设置为负数来完成。例如，“反序列：第-1节；”将“部分”与负面设置。

>我可以将CSS计数器与其他CSS属性一起使用吗？例如，您可以将“计数器”或“计数器”功能与“内容”属性一起显示来显示计数器的值。您也可以使用任何元素使用“反静音”和“反插入”属性来控制计数器的价值。

以上是了解CSS计数器及其用例的详细内容。更多信息请关注PHP中文网其他相关文章！