如何为不同页面上的章节标题编号？

问题描述 投票：0回答：1

我正在解决一个相当奇怪的问题。我正在建立一个网站，其中包含指定项目的文档。我想将每个部分分开在自己的页面上（因此 

index.html
包含项目作业，
introduction.html
包含有关我将用来涵盖该主题的主题和方法的初始信息，
theory.html
包含对理论的更深入研究主题后面等）我将其制作为静态网站，因此它是纯 HTML/CSS，没有 PHP 或 JavaScript。但我正在寻找一种根据页面顺序自动对部分进行编号的方法。这是完整页面：

<!DOCTYPE HTML>
<html lang="cs-CZ">
    <head>
        <meta charset="utf-8" />
        <title>ZBK — Semestrální projekt | POL0423</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 700px)" />
    </head>
    <body>
        <header>
            <div class="logo"><img src="img/fei_cz.png" alt="VŠB-TUO FEI logo" /></div>
            <div class="head">
                <h1 class="predmet">Základy bezpečnosti v komunikacích</h1>
                <h2 class="autor">Marek Poláček (POL0423)</h2>
                <nav><a href="/~pol0423/">Zpět na hlavní stranu</a></nav>
            </div>
        </header>
        <div id="wrapper">
            <div class="content" data-section-number="1">
                <h1>Zadání</h1>
                <p class="zadani">Bezpečnost ve 4G a 5G mobilních sítích &ndash; popis zabezpečovacích mechanismů, detailní průzkum možných útoků, analýza proveditelnosti popsaných útoků a jejich složitost.</p>
                <ul>
                    <li>Úkolem je popsat zabezpečovací mechanismy mobilních sítí 4G a 5G, robustnost proti poškození dat a jejich bezpečnosti, prozkoumat možné vektory útoků a analyzovat jejich proveditelnost a složitost.</li>
                    <li>Součástí dokumentu bude detailní popis možných útoků, rizik z nich vyplývajících, a detailní analýza složitosti a proveditelnosti popsaných útoků a zhodnocení, zda má takový útok cenu provádět.</li>
                    <li>Cílem je poskytnout údaje o robustnosti mobilních komunikačních sítí a jejich bezpečnosti pro koncové uživatele.</li>
                </ul>
            </div>
            <div class="sidebar">
                <div class="sidebar__content">
                    <h1 class="toc__title">Obsah</h1>
                    <ol class="toc">
                        <li><a href="index.html" aria-current="true">Zadání</a></li>
                        <li><a href="uvod.html">Úvod</a></li>
                        <li><a href="teorie.html">Teoretický rozbor</a>
                            <ol>
                                <li><a href="teorie.html#sec1">Sekce 1</a></li>
                                <li><a href="teorie.html#sec2">Sekce 2</a></li>
                            </ol>
                        </li>
                        <li><a href="zaver.html">Závěr</a></li>
                        <li><a href="literatura.html">Literatura</a></li>
                    </ol>
                </div>
            </div>
        </div>
        <footer>
            <strong>Základy bezpečnosti v komunikacích:</strong> Bezpečnost ve 4G a 5G mobilních sítích &ndash; popis zabezpečovacích mechanismů, detailní průzkum možných útoků, analýza proveditelnosti popsaných útoků a jejich složitost.
        </footer>
    </body>
</html>

（忽略其中的捷克语文本，布局很重要）为此，我设置了适用于桌面和移动设备的 CSS（响应式设计）。这是一个非常简单的设计，我的目标不是一个极其复杂的视觉糖果，我需要提供内容，所以它需要尽可能轻量级，但同时实际上看起来很漂亮。这就是为什么我选择纯 HTML/CSS 而不是像 Bootstrap 这样的生成框架。

我正在寻找答案的 CSS 部分是这样的：

.content[data-section-number] {
    counter-reset: section calc(attr(data-section-number) - 1);
    counter-reset: subsection;

    & h1 {
        counter-increment: section;
        counter-reset: subsection;
        position: relative;

        &::before {
            content: counter(section);
            left: -3rem;
            position: absolute;
            opacity: 0.6;
            transition: opacity 0.5s ease;
        }

        &:hover::before {
            opacity: 1;
        }
    }

    & h2 {
        counter-increment: subsection;
        position: relative;

        &::before {
            content: counter(section) "." counter(subsection);
            left: -3rem;
            position: absolute;
            opacity: 0.6;
            transition: opacity 0.5s ease;
        }

        &:hover::before {
            opacity: 1;
        }
    }
}

演示：

.content[data-section-number] {
  counter-reset: section calc(attr(data-section-number) - 1);
  counter-reset: subsection;
  & h1 {
    counter-increment: section;
    counter-reset: subsection;
    position: relative;
    &::before {
      content: counter(section);
      left: -3rem;
      position: absolute;
      opacity: 0.6;
      transition: opacity 0.5s ease;
    }
    &:hover::before {
      opacity: 1;
    }
  }
  & h2 {
    counter-increment: subsection;
    position: relative;
    &::before {
      content: counter(section) "." counter(subsection);
      left: -3rem;
      position: absolute;
      opacity: 0.6;
      transition: opacity 0.5s ease;
    }
    &:hover::before {
      opacity: 1;
    }
  }
}
<!DOCTYPE HTML>
<html lang="cs-CZ">

<head>
  <meta charset="utf-8" />
  <title>ZBK — Semestrální projekt | POL0423</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 700px)" />
</head>

<body>
  <header>
    <div class="logo"><img src="img/fei_cz.png" alt="VŠB-TUO FEI logo" /></div>
    <div class="head">
      <h1 class="predmet">Základy bezpečnosti v komunikacích</h1>
      <h2 class="autor">Marek Poláček (POL0423)</h2>
      <nav><a href="/~pol0423/">Zpět na hlavní stranu</a></nav>
    </div>
  </header>
  <div id="wrapper">
    <div class="content" data-section-number="1">
      <h1>Zadání</h1>
      <p class="zadani">Bezpečnost ve 4G a 5G mobilních sítích &ndash; popis zabezpečovacích mechanismů, detailní průzkum možných útoků, analýza proveditelnosti popsaných útoků a jejich složitost.</p>
      <ul>
        <li>Úkolem je popsat zabezpečovací mechanismy mobilních sítí 4G a 5G, robustnost proti poškození dat a jejich bezpečnosti, prozkoumat možné vektory útoků a analyzovat jejich proveditelnost a složitost.</li>
        <li>Součástí dokumentu bude detailní popis možných útoků, rizik z nich vyplývajících, a detailní analýza složitosti a proveditelnosti popsaných útoků a zhodnocení, zda má takový útok cenu provádět.</li>
        <li>Cílem je poskytnout údaje o robustnosti mobilních komunikačních sítí a jejich bezpečnosti pro koncové uživatele.</li>
      </ul>
    </div>
    <div class="sidebar">
      <div class="sidebar__content">
        <h1 class="toc__title">Obsah</h1>
        <ol class="toc">
          <li><a href="index.html" aria-current="true">Zadání</a></li>
          <li><a href="uvod.html">Úvod</a></li>
          <li><a href="teorie.html">Teoretický rozbor</a>
            <ol>
              <li><a href="teorie.html#sec1">Sekce 1</a></li>
              <li><a href="teorie.html#sec2">Sekce 2</a></li>
            </ol>
          </li>
          <li><a href="zaver.html">Závěr</a></li>
          <li><a href="literatura.html">Literatura</a></li>
        </ol>
      </div>
    </div>
  </div>
  <footer>
    <strong>Základy bezpečnosti v komunikacích:</strong> Bezpečnost ve 4G a 5G mobilních sítích &ndash; popis zabezpečovacích mechanismů, detailní průzkum možných útoků, analýza proveditelnosti popsaných útoků a jejich složitost.
  </footer>
</body>

</html>

问题是，当我将 

data-section-number
更改为高于 
1
的数字时，它不起作用。我的猜测是 
attr()
函数除了在 
content
属性（仅用于 
::before
和 
::after
伪元素）之外在其他任何地方都不起作用。但我不能简单地将其放入标题的内容中，因为这实际上从所选元素而不是从父元素获取属性。所以我不能使用像
content: attr(data-section-number)
这样的解决方案，它也根本不起作用。我还尝试设置一个本地 CSS 变量并使用它，但这也不起作用。

你知道我如何完成它吗？最好是在没有 JavaScript 帮助的情况下？我真的不喜欢使用 JavaScript，它一点也不轻量级，而且我的目标是快速加载时间。

这基本上就是我的目标： Website screenshot

注意那里的光标，这就是我要找的。这是我想要使用我在数据属性中指定的部分编号值的数字。

html css sections
1个回答
0
投票

所以解决方案简单得令人难以置信。这很愚蠢（这就是我想避免它的原因），但它确实有效。解决方案是简单地使用该特定部分的直接样式声明重置计数器：

<!DOCTYPE HTML>
<html lang="cs-CZ">
    <head>
        <meta charset="utf-8" />
        <title>ZBK — Semestrální projekt | POL0423</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 700px)" />
    </head>
    <body>
        <header>
            <div class="logo"><img src="img/fei_cz.png" alt="VŠB-TUO FEI logo" /></div>
            <div class="head">
                <h1 class="predmet">Základy bezpečnosti v komunikacích</h1>
                <h2 class="autor">Marek Poláček (POL0423)</h2>
                <nav><a href="/~pol0423/">Zpět na hlavní stranu</a></nav>
            </div>
        </header>
        <div id="wrapper">
            <div class="content" style="counter-reset: section 0;">
                <h1>Zadání</h1>
                <p class="zadani">Bezpečnost ve 4G a 5G mobilních sítích &ndash; popis zabezpečovacích mechanismů, detailní průzkum možných útoků, analýza proveditelnosti popsaných útoků a jejich složitost.</p>
                <ul>
                    <li>Úkolem je popsat zabezpečovací mechanismy mobilních sítí 4G a 5G, robustnost proti poškození dat a jejich bezpečnosti, prozkoumat možné vektory útoků a analyzovat jejich proveditelnost a složitost.</li>
                    <li>Součástí dokumentu bude detailní popis možných útoků, rizik z nich vyplývajících, a detailní analýza složitosti a proveditelnosti popsaných útoků a zhodnocení, zda má takový útok cenu provádět.</li>
                    <li>Cílem je poskytnout údaje o robustnosti mobilních komunikačních sítí a jejich bezpečnosti pro koncové uživatele.</li>
                </ul>
            </div>
            <div class="sidebar">
                <div class="sidebar__content">
                    <h1 class="toc__title">Obsah</h1>
                    <ol class="toc">
                        <li><a href="index.html" aria-current="true">Zadání</a></li>
                        <li><a href="uvod.html">Úvod</a></li>
                        <li><a href="teorie.html">Teoretický rozbor</a>
                            <ol>
                                <li><a href="teorie.html#sec1">Sekce 1</a></li>
                                <li><a href="teorie.html#sec2">Sekce 2</a></li>
                            </ol>
                        </li>
                        <li><a href="zaver.html">Závěr</a></li>
                        <li><a href="literatura.html">Literatura</a></li>
                    </ol>
                </div>
            </div>
        </div>
        <footer>
            <strong>Základy bezpečnosti v komunikacích:</strong> Bezpečnost ve 4G a 5G mobilních sítích &ndash; popis zabezpečovacích mechanismů, detailní průzkum možných útoků, analýza proveditelnosti popsaných útoků a jejich složitost.
        </footer>
    </body>
</html>

这个想法是让 

section 0
成为上一页的任何数字。如果是第一页，那就是字面上的
section 0
。如果上一页是第 5 页，则它将是 
section 5
。正确的数字始终是该数字 + 1，这就是计数器增量的作用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.