Pouvez-vous créer un échiquier avec du CSS pur et sans classes ni identifiants ?

Création d'un échiquier CSS pur : divisions, pas de classes ni d'identifiants

Dans le domaine de l'art CSS pur, un défi commun se pose : comment construire des mises en page complexes sans recourir à classes ou identifiants. Un casse-tête curieux dans ce domaine consiste à créer un échiquier en utilisant uniquement des divs, sans classes ni identifiants.

Cette tâche particulière a intrigué les aspirants sorciers CSS pendant des jours, les incitant à explorer les domaines de nth-child() et ses variantes. Cependant, aucune solution ne semble se matérialiser.

Alors, est-il possible de réaliser cet exploit de conception insaisissable ?

Fait intéressant, même si un échiquier peut être rendu à l'aide de divs sans classes ni identifiants, il peut être mieux adapté à l'expression sous forme de tableau. Cela offre plus d'accessibilité aux lecteurs d'écran, leur permettant de transmettre clairement les positions des chiffres sur le tableau.

Considérez l'extrait CSS suivant :

<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>

Ce CSS crée efficacement un motif d'échiquier au sein une structure de tableau. En alternant les couleurs d'arrière-plan des lignes et colonnes impaires et paires, le motif en damier familier apparaît.

Voici une démonstration sur 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!