css设置父元素样式_快速提示：使用CSS计数器为增量元素设置样式-CSDN博客

本文介绍了如何使用CSS计数器为有序列表创建自定义样式，包括基本语法、示例和应用场景，强调了计数器的可访问性限制及在不同浏览器中的表现。

摘要由CSDN通过智能技术生成

css设置父元素样式

学习CSS：完整指南

无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。

在这个快速技巧中，我们将介绍CSS计数器的基本知识；一项有用但尚未广为人知CSS功能。构建完演示之后，我们将看一些利用CSS计数器的真实示例站点。

目标：样式化有序列表

第一步，让我们看一下将要构建的布局：

没什么好看的，对吧？但是，这就是挑战：我们将使用语义标记，避免使用不必要的div和span元素来构建这些计数器标记的诱惑。

让我们讨论一个干净灵活的解决方案！

CSS计数器

生成上述布局所需的全部工作就是定义一个有序列表。在这一点上，您可能想知道我们是否可以使用其他元素甚至是无序列表。简短的答案是“是”，但是请记住，有序列表是唯一能够准确描述页面结构的元素。

然后，您可能会问，是否有可能完全自定义有序列表编号的外观，并以此方式构建所需的布局。样式化有序列表编号确实很棘手。值得庆幸的是，还有一种替代的跨浏览器方法，所以让我们隐藏默认的列表号，而改用CSS计数器。

句法

CSS计数器使我们能够根据重复的元素生成数字，并相应地设置其样式。将CSS计数器视为变量，其值可以增加。让我们看一下基本语法：

在这里，我们在有序列表上创建一个新计数器并定义其范围。我们使用counter-reset属性。

第一个值是计数器的名称
后面跟一个可选参数，用于定义计数器的起始值（默认值：0）。请注意，计数器将始终开始递增计数，因此在本例中，第一个生成的值为1。

在第二张图中，我们可以看到我们正在对列表中li伪元素::before样式设置。

在这里，我们将计数器的值添加到::before的content中。值得一提的是，通过将CSS计数器与content属性一起使用，我们可以将生成的数字与字符串连接（连接）。
我们参考柜台的名字
并将计数器的样式定义为“十进制”。此处的可能值类似于用于list-style-type属性的值。
在counter-increment规则中，我们再次引用计数器的名称
然后使用可选参数指示计数器增加多少。此处的默认值为1。

标记

根据我们刚刚讨论的内容，这是我们的标记：

<ol>
  <li>
    <h4>List Item</h4>
    <p>Some text here.</p>
  </li>
  <li>
    <h4>List Item</h4>
    <p>Some text here.</p>
  </li>
      
  <-- more list items here -->
</ol>

和相关CSS：

ol {
  counter-reset: section;
}

li { 
  list-style-type: none;
  font-size: 1.5rem;
  padding: 30px;
  margin-bottom: 15px;
  background: #0e0fee;
  color: #fff;
}

li::before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  position: absolute;
  left: -75px;
  top: 50%;
  transform: translateY(-50%);
  padding: 12px;
  font-size: 2rem;
  width: 25px;
  height: 25px;
  text-align: center;
  color: #000;
  border-radius: 50%;
  border: 3px solid #000;
}

这样得出的结果如下所示：