Einige Dinge wissen Sie möglicherweise nicht über benutzerdefinierte Gegenstile

Juan hat kürzlich einige äußerst interessante Dinge über Stillisten (insbesondere Listenmarkierungen) in seinem Jahrbucheintrag zu den Regeln enthüllt. Möglicherweise haben Sie bereits etwas über das Pseudoelement erfahren. Sie haben höchstwahrscheinlich versucht, @counter-style und ::marker benutzerdefinierte Zähler zu verwenden. Alternativ könnte Ihr Ansatz darin bestehen, counter-reset zu klären (vorsichtig tun!) Und die Marke auf die counter-increment -Pseudoelemente des Listenelements manuell scrollen. list-style ::before Aber haben Sie es versucht

? Es stellt sich heraus, dass es viele schwere Arbeit leistet und neue Möglichkeiten eröffnet, Listen und Listen -Tags zu verwenden.

@counter-style Stellen Sie den Markierungsstil für nur einen Listenelement

fest

Dies wird als "festes" System bezeichnet, das auf ein bestimmtes Projekt eingestellt ist.

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "?";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

Zeichen zu bestimmten Tags

Zeichen zuweisen

Wenn Sie das "Akkumulation" -System verwenden, können Sie definieren, welche Symbole zu welchen Listenelementen gehören.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

Beachten Sie, dass das System, sobald das System das Ende der Schleife erreicht ist, eine neue Sequenz basiert, die auf dem ersten Element im Muster basiert. Beispielsweise hat ein typischer Würfel sechs Seiten, und wir beginnen zwei Ziaschen auf dem siebten Listenelement zu rollen, insgesamt sieben.

Fügen Sie dem List -Tag

ein Präfix und ein Suffix hinzu.

Vor langer Zeit zeigte Chris eine Möglichkeit, Interpunktionsmarkierungen am Ende einer Listenmarke mit einem Pseudoelement eines Listenelements einzulegen: ::before

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

Es ist einfacher zu verwenden

jetzt: @counter-styles

@counter-style parentheses {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

Setzen Sie den Stil mehrerer Listenelemente Range

Angenommen, Sie haben eine Liste von 10 Elementen, möchten jedoch nur die Artikel 1-3 stylen. Wir können einen Bereich dafür festlegen:

@counter-style single-range {
  system: extends upper-roman;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

wir können sogar unsere eigenen Würfelbeispiele erweitern:

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

Eine andere Möglichkeit besteht darin, das Schlüsselwort

als erster Wert zu verwenden: infinite

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: infinite 3;
}

li {
  list-style: single-range;
}

Apropos

, Sie können ihn auf den zweiten Wert einstellen, der unbegrenzt auf der Anzahl der Listenelemente, die Sie haben, unbegrenzt zählt. infinite

Vielleicht möchten Sie zwei Bereiche gleichzeitig stylen und Artikel 6-9 enthalten. Ich bin mir nicht sicher, warum Sie das tun möchten, aber ich glaube, Sie (oder Ihr Nilpferd) haben gute Gründe.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style multiple-ranges {
  system: extends dice;
  suffix: ".";
  range: 1 3, 6 9;
}

li {
  list-style: multiple-ranges;
}

Polster hinzufügen, um Marker zu listen

Haben Sie jemals eine ungleichmäßige Ausrichtung der Listenmarken begegnet? Dies geschieht normalerweise von ein bis zwei Ziffern. Sie können die Marke mit zusätzlichen Zeichen füllen, um den Inhalt auszurichten.

/* 为列表项标记添加前导零 */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

Jetzt werden sich die Markierungen immer ausrichten ... na ja, bis zu 999 Artikel.

Zusammenfassung

Ich denke, das sind einige sehr interessante Möglichkeiten, Listen -Tags in CSS zu verwenden, die besser sind als das, was ich traditionell mit solchen Problemen behandelt habe. Und da

im September 2023 zur Basislinie "neu verfügbar" wird, wird sie im Browser gut unterstützt. @counter-style

Das obige ist der detaillierte Inhalt vonEinige Dinge wissen Sie möglicherweise nicht über benutzerdefinierte Gegenstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!