代码之家 › 专栏 › 技术社区 › n247s

父级上的计数器增量,子级上的内容

css-counter css html

n247s · 技术社区 · 7 年前

我正在用css的“counter increment”和“counter reset”属性进行一点串接。我已经能很好地处理列表了,但是当涉及到标题标签时,我就不那么清楚了。

想象一下下面的布局:

<div id="root">
    <div class="section">
        <h1 class="header">Header</h1>

        <div class="section">
            <h2 class="header">Header</h2>
            <!-- can be nested multiple times -- >
        </div>
    </div>
    <div class="section">
        <h1 class="header">Header</h1>
        <!-- content -->
    </div>
</div>

我希望标题标记被编号(包括嵌套计数!)但是由于头标签本身没有嵌入,但是他们的父母我不能让它正常工作。这就是我到目前为止得到的(基于逻辑,但不是我想要实现的最接近的解决方案!我尝试了所有我能想到的组合)

#root
{
    /* root should reset counter */
    counter-reset: section_header;
}

#root .section
{
    /* since every section has a header tag, we should count sections-divs, as they wrap children as well */
    counter-increment: section_header;
}

.section .header::before
{
    /* This would take care of the display, but I suspect it doesn't obtain the correct value since the scope of the counter is not available? */
    content: counters(section_header, ".") " ";
}

我会感激任何解决方案的方向(如果存在的话)。

我应该说我主要在Chrome上测试这个,但是我在其他浏览器上也发现了这个。

编辑

我要找的格式是“1.1”、“1.2”、“1.2.1”等。。每个嵌套的部分都应该附加另一个计数器层,尽管我可以在不分层(单深度)的情况下使用它,但是动态的多层是很难实现的。

1 回复 | 直到 7 年前

git-e-up 7 年前

更新:我看到了MDN示例,您可能在创建这个示例时使用了它作为灵感。将其转换为标记的令人困惑之处在于 <ol> 和 <li> 包含子元素的标记。这在header上下文中没有那么多意义 <h_> 元素,但似乎必须将子元素保留在其中才能完成相同的任务。我添加了after元素和一些轻量级css来显示每个元素的结束位置。希望这有帮助。

.section {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

.header::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

.section{
  font-size: 16px;
  margin: 10px 0;
}
h1::after {
  content: ' (end h1)';
}

h2 {
  margin-left: 10px;
}
h2::after {
  content: ' (end h2)';
}

h3 {
  margin-left: 20px;
}
h3::after {
  content: ' (end h3)';
}

<div id="root">
  <div class="section">
    <h1 class="header">item</h1>          <!-- 1     -->
    <h1 class="header">item               <!-- 2     -->
      <div class="section">
        <h2 class="header">item</h2>      <!-- 2.1   -->
        <h2 class="header">item</h2>      <!-- 2.2   -->
        <h2 class="header">item           <!-- 2.3   -->
          <div class="section">
            <h3 class="header">item</h3>  <!-- 2.3.1 -->
            <h3 class="header">item</h3>  <!-- 2.3.2 -->
          </div>
         </h2>
         <h2 class="header">item 
          <div class="section">
            <h3 class="header">item</h3>  <!-- 2.4.1 -->
            <h3 class="header">item</h3>  <!-- 2.4.2 -->
            <h3 class="header">item</h3>  <!-- 2.4.3 -->
          </div>
        </h2>
        <h2 class="header">item</h2>      <!-- 2.5   -->
      </div>
    </h1>
    <h1 class="header">item</h1>          <!-- 3     -->
    <h1 class="header">item</h1>          <!-- 4     -->
  </div>
</div>