CSS3: Clevere Verwendung struktureller Pseudoklassenselektoren

Ich habe kürzlich auf einer ausländischen Website die Verwendung eines strukturellen Pseudoklassenselektors gesehen, den ich für sehr praktisch hielt, also habe ich es selbst ausprobiert und aufgezeichnet:

Dies ist der einfachste Stil:

<span style="color: #008080;"> 1</span> <span style="color: #800000;"><style type="text/css">
</span><span style="color: #008080;"> 2</span> <span style="color: #800000;">    li</span>{
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">        list-style-type</span>:<span style="color: #0000ff;"> none</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">        float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;"> 60px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;"> 60px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">        background-color</span>:<span style="color: #0000ff;"> #979698</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">        margin-left</span>:<span style="color: #0000ff;"> 10px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">        text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">        line-height</span>:<span style="color: #0000ff;"> 60px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">        border-radius</span>:<span style="color: #0000ff;"> 50%</span>;
<span style="color: #008080;">13</span>     }
<span style="color: #008080;">14</span> <span style="color: #800000;"></style></span>

Inhalt im Textkörper:

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span>  <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第01个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第02个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第03个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第04个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第05个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第06个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第07个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第08个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第09个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第10个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span>      <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第11个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span>  <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

Der erste ist die Verwendung des grundlegendsten strukturellen Pseudoklassenselektors:

<span style="color: #008080;">1</span> <span style="color: #800000;">    li:nth-child(8)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">4</span>     }

Die Ergebnisse werden angezeigt als:

Verwenden Sie:nth-child(n 6), was dem li-Tag-Element von:nth-child(6) und höher entspricht:

<span style="color: #008080;">1</span> <span style="color: #800000;">    li:nth-child(n+6)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">4</span>     }

Die Ergebnisse werden angezeigt als:

Verwenden Sie:nth-child(-n 6) auf die gleiche Weise, was äquivalent zu:nth-child(6) und den folgenden li-Tag-Elementen ist:

<span style="color: #008080;">1</span> <span style="color: #800000;">    li:nth-child(-n+6)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">4</span>     }

Die Ergebnisse werden angezeigt als:

Basierend auf den oben genannten Prinzipien können wir einige fortgeschrittene Prinzipien entwickeln:

Zum Beispiel können Sie nth-child(n 4):nth-child(-n 8) verwenden, um die li-Tag-Elemente von :nth-child(4) und höher und :nth-child(8) und zu erhalten unten:

<span style="color: #008080;">1</span> <span style="color: #800000;">    li:nth-child(n+4):nth-child(-n+8)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">3</span>     }

Die Ergebnisse werden angezeigt als:

Sie können auch:nth-child(n 2):nth-child(odd):nth-child(-n 8) verwenden, um:nth-child(n 2) zu:nth-child(-n 8) zu erhalten ) Singulares Li-Tag-Element zwischen:

<span style="color: #008080;">1</span> <span style="color: #800000;">    li:nth-child(n+2):nth-child(odd):nth-child(-n+8)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">3</span>     }

Die Ergebnisse werden angezeigt als:

Schließlich können wir auch:nth-child(3n 1) verwenden, um gerade li-Tag-Elemente mit den Nummern 1, 4, 7 und 10 zu erhalten:

<span style="color: #008080;">1</span> <span style="color: #800000;">    li:nth-child(3n+1):nth-child(even)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">3</span>     }

Die Ergebnisse werden angezeigt als: