Können Sie ein Schachbrett mit reinem CSS und ohne Klassen oder IDs erstellen?

Reine CSS-Schachbretterstellung: Divs, keine Klassen oder IDs

Im Bereich der reinen CSS-Kunst entsteht eine häufige Herausforderung: Wie kann man komplizierte Layouts erstellen, ohne darauf zurückgreifen zu müssen? Klassen oder IDs. Ein merkwürdiges Rätsel in diesem Bereich ist das Erstellen eines Schachbretts, das nur aus Divs besteht, ohne Klassen oder IDs.

Diese besondere Aufgabe hat angehende CSS-Assistenten tagelang verwirrt und sie dazu verleitet, die Bereiche von nth-child() und zu erkunden seine Variationen. Allerdings schien keine Lösung zustande zu kommen.

Ist es also möglich, diese schwer fassbare Designleistung zu erreichen?

Interessanterweise kann ein Schachbrett zwar mit Divs ohne Klassen oder IDs gerendert werden, dies ist jedoch möglicherweise der Fall eignet sich besser als Tabelle zum Ausdruck. Dies bietet Screenreadern eine bessere Zugänglichkeit und ermöglicht es ihnen, die Positionen von Figuren auf der Tafel klar darzustellen.

Bedenken Sie das folgende CSS-Snippet:

<code class="css">table tr:nth-child(odd) td:nth-child(even) {
  background: #000;
}
table tr:nth-child(even) td:nth-child(odd) {
  background: #000;
}</code>

Dieses CSS erzeugt effektiv ein Schachbrettmuster darin eine Tabellenstruktur. Durch Abwechseln der Hintergrundfarben ungerader und gerader Zeilen und Spalten entsteht das bekannte Schachbrettmuster.

Hier ist eine Demonstration zu JSFiddle:

<code class="html"><table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

Das obige ist der detaillierte Inhalt vonKönnen Sie ein Schachbrett mit reinem CSS und ohne Klassen oder IDs erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!