Aby wyświetlać pełne ścieżki sekcji, takie jak 1.2.1, zagnieżdżaj listy uporządkowane i użyj CSS counters(), aby połączyć ich poziomy. W tym samouczku utworzysz lokalny plik HTML na Macu, zachowasz kolejność konspektu i dowiesz się, jak sprawdzać numerację po edycjach.

Jak działa numeracja pełnymi ścieżkami?

Pełna ścieżka sekcji wskazuje pozycję elementu na każdym poziomie. Na przykład 1.2.1 oznacza pierwszy element w drugim elemencie podrzędnym pierwszego elementu najwyższego poziomu. CSS udostępnia funkcję counters(), która służy właśnie do łączenia wartości zagnieżdżonych liczników. Odczytuje je od licznika zewnętrznego do wewnętrznego, wstawiając wybrany separator. MDN: funkcja CSS counters()

W tym przypadku konspekt jest listą uporządkowaną z zagnieżdżonymi gałęziami. Nie jest automatycznie generowanym spisem treści nagłówków znajdujących się w innym miejscu dokumentu. HTML określa kolejność elementów listy uporządkowanej jako kolejność w drzewie, dlatego zachowaj w kodzie źródłowym kolejność zgodną z zamierzoną kolejnością czytania. Standard HTML: element ol

Przykład korzysta z trzech reguł: tworzy licznik na każdej uczestniczącej liście, zwiększa jego wartość dla każdego elementu i wyświetla połączoną ścieżkę przed etykietą elementu. To wzorzec zagnieżdżonych liczników opisany przez MDN, z selektorami ograniczonymi do tego konspektu. MDN: używanie liczników CSS

Utwórz plik konspektu na Macu

Potrzebujesz TextEdit i przeglądarki, na przykład Safari. Kompletny przykład zawiera własny arkusz stylów i przykładową treść; nie wymaga pakietów, narzędzi do kompilacji ani JavaScriptu.

  1. Otwórz TextEdit i wybierz File > New.
  2. Wybierz Format > Make Plain Text.
  3. Wklej kompletny przykład poniżej.
  4. Wybierz File > Save, nazwij plik outline.html i zapisz go w dogodnym miejscu, na przykład na Biurku.
  5. Jeśli TextEdit zapyta, którego rozszerzenia użyć, wybierz Use .html.

Apple opisuje ten sposób tworzenia plików HTML w TextEdit jako pracę z tekstem zwykłym. Apple: praca z dokumentami HTML w TextEdit na Macu

Poniżej znajduje się kompletny dokument. Skopiuj zawartość bloku kodu, pomijając linie z ogranicznikami Markdown.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nested outline example</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

Otwórz Safari, a następnie przeciągnij plik outline.html z Findera do okna Safari. Edytuj kod źródłowy w TextEdit, a w Safari sprawdzaj wyświetlony konspekt. Po każdej edycji zapisz plik i odśwież stronę w przeglądarce.

Pozostaw TextEdit w trybie edycji kodu

Po ponownym otwarciu pliku możesz zobaczyć sformatowaną treść zamiast kodu źródłowego. Apple opisuje dwie możliwości: wybierz File > Open, kliknij Show Options i zaznacz Ignore rich text commands albo włącz opcję Display HTML files as HTML code instead of formatted text w sekcji TextEdit > Settings > Open and Save. Apple: praca z dokumentami HTML w TextEdit na Macu

Sprawdź pełne ścieżki na podstawie przykładu

Poniżej znajduje się oczekiwany wygląd konspektu. Etykiety są neutralnymi symbolami zastępczymi; ich pozycje określają numery.

1 Węzeł A
  1.1 Węzeł B
  1.2 Węzeł C
    1.2.1 Węzeł D
    1.2.2 Węzeł E
  1.3 Węzeł F
2 Węzeł G
  2.1 Węzeł H
3 Węzeł I

Ten przykład sprawdza trzy różne przejścia. Węzeł D rozpoczyna trzeci poziom pod Węzłem C. Węzeł F wznawia drugi poziom po zakończeniu tej gałęzi. Węzeł G wznawia najwyższy poziom, a jego pierwsze dziecko otrzymuje numer 2.1. Deterministyczne przejście po drzewie przykładowym potwierdziło te oczekiwane ścieżki; podczas przygotowywania przykładu nie wyświetlano go w przeglądarce.

Dlaczego każda reguła CSS ma znaczenie

Reset musi obejmować zarówno .outline, jak i .outline ol. Każda zagnieżdżona lista potrzebuje nowej instancji outline-section; zresetowanie tylko listy zewnętrznej nie utworzyłoby osobnego licznika dla każdego poziomu. Zwiększenie licznika na każdym elemencie listy podnosi wartość bieżącej instancji. MDN: używanie liczników CSS

Reguła wyświetlania używa counters(outline-section, "."). Funkcja w liczbie mnogiej zbiera wszystkie aktywne instancje o tej nazwie. Zastąpienie jej formą pojedynczą counter(outline-section) wyświetliłoby tylko wartość bieżącego poziomu, przez co zagnieżdżony element otrzymałby etykietę 1 zamiast pełnej ścieżki. MDN: funkcja CSS counters()

Przykład usuwa natywne znaczniki listy, ponieważ dodaje własne prefiksy. Każda lista ma też atrybut role="list": MDN informuje, że Safari może w przeciwnym razie pomijać listy stylizowane za pomocą list-style-type: none w drzewie dostępności. Zachowaj ten atrybut, dodając kolejną zagnieżdżoną listę. MDN: właściwość CSS list-style-type

Edytuj konspekt, nie naruszając jego struktury

Umieść każdy zagnieżdżony element <ol> wewnątrz elementu <li>, do którego należy dana gałąź. Na przykład Węzeł C zawiera swoją listę dzieci przed zamykającym go znacznikiem </li>. Zagnieżdżona lista nie może być bezpośrednim dzieckiem innej listy uporządkowanej. MDN: element HTML listy uporządkowanej

Praktyczny test edycji: dodaj nowy element bezpośrednio przed Węzłem C. Jego nowa ścieżka powinna mieć wartość 1.2; Węzeł C powinien otrzymać numer 1.3, a Węzły D i E — odpowiednio 1.3.1 i 1.3.2. Węzeł G powinien nadal mieć numer 2. Te oczekiwane zmiany wynikają z hierarchii przykładu i pozwalają sprawdzić, czy numeracja odzwierciedla strukturę gałęzi.

Aby przenieść gałąź, przenieś cały element listy, do którego należy, wraz z zagnieżdżonymi listami i znacznikiem zamykającym. Przeniesienie samej etykiety pozostawi dzieci na miejscu. Aby utworzyć czwarty poziom, powtórz istniejącą strukturę zagnieżdżonej listy wewnątrz odpowiedniego elementu; nie wpisuj dodatkowego numeru do etykiety.

Jeśli dzieci gałęzi mają tworzyć jeden ciągły ciąg, pozostaw jedną listę dzieci na gałąź. W tej implementacji utworzenie kolejnej zagnieżdżonej listy równorzędnej powoduje kolejny reset, więc jej lokalna numeracja zaczyna się od nowa. Przykład MDN pokazuje taki restart w osobnych zagnieżdżonych listach pod tym samym elementem. MDN: używanie liczników CSS

Diagnozuj błędną numerację w przydatnej kolejności

Zacznij od struktury, potem sprawdź reguły liczników, a na końcu sposób wyświetlania. Zmiana wcięcia nie naprawi brakującego poziomu zagnieżdżenia.

Co widzisz Co sprawdzić Poprawka w tym przykładzie
Każdy zagnieżdżony element ma ten sam pojedynczy numer Funkcję w content Użyj counters() w liczbie mnogiej i jako separatora wstaw kropkę.
Każdy element równorzędny zaczyna się od 1 Selektor resetujący Resetuj liczniki na listach, a nie na każdym elemencie.
Obok pełnych ścieżek pojawiają się natywne numery Regułę stylu listy Zastosuj list-style-type: none do listy zewnętrznej i zagnieżdżonych list.
Gałąź ma nieoczekiwany prefiks Umiejscowienie zagnieżdżonej listy Umieść listę dzieci wewnątrz elementu, do którego należy.
Inna lista w dokumencie też otrzymuje prefiksy Zakres selektorów liczników Zachowaj prefiks .outline w regułach.

Sprawdź też, czy jakiś element nie został ukryty. Operacje liczników CSS nie są wykonywane na elementach, które nie generują pudełka, w tym na elementach z display: none. Natomiast visibility: hidden nadal generuje pudełko, a zatem może wpływać na liczenie. Zdecyduj świadomie, czy pominięty element powinien zajmować pozycję. W3C: liczniki na elementach, które nie generują pudełek

A co z niestandardowymi numerami początkowymi?

Ten przykład celowo używa niestandardowego licznika, który zaczyna od zera i zwiększa się do jedynki. Atrybuty HTML takie jak start, reversed oraz value elementu listy sterują natywną numeracją listy uporządkowanej; pokazane tutaj niestandardowe reguły outline-section nie odczytują tych atrybutów. Samo dodanie start="4" nie sprawi więc, że wyświetlany w przykładzie prefiks zacznie się od 4. Standard HTML: listy uporządkowane i ich elementy

Jeśli potrzebujesz nieciągłej numeracji lub gałęzi numerowanych malejąco, uwzględnij to wymaganie przed dostosowaniem arkusza stylów. Zachowaj zgodność wyświetlanej ścieżki z zamierzonymi wartościami listy uporządkowanej, zamiast dodawać atrybuty ignorowane przez niestandardowy sposób wyświetlania.

Zdecyduj, czy numery są elementem prezentacji, czy treścią dokumentu

Prefiksy w tym samouczku są treścią generowaną przez CSS. Nadają się do wizualnego konspektu, ale istotne odnośniki wymagają dodatkowego namysłu: MDN informuje, że treść dodawana przez ::before nie jest niezawodnie dostępna dla czytników ekranu. Dodanie role="list" zachowuje rozpoznawanie listy, ale nie gwarantuje odczytania każdej wygenerowanej ścieżki. MDN: pseudoelement CSS ::before

Jeśli pełna ścieżka musi być częścią właściwego tekstu, na przykład w eksporcie do zwykłego tekstu, umieść ją w dokumencie jako tekst albo wygeneruj podczas eksportu. Zmienia to zasady utrzymania: po edycji trzeba również aktualizować zapisane ścieżki. Nie polegaj na wizualnym prefiksie jako źródle istotnego tekstu we wszystkich formatach wyjściowych.

W przypadku lokalnego konspektu wizualnego sprawdź na koniec dziewięć przykładowych ścieżek, wstaw element równorzędny i potwierdź, że numeracja danej gałęzi zmieniła się zgodnie z oczekiwaniami. Gdy te kontrole przejdą pomyślnie w przeglądarce, zastąp przykładowe etykiety własnymi, zachowując zagnieżdżenie i kolejność w kodzie źródłowym.

Źródła