Comment créer un échiquier sans utiliser de classes ou d'identifiants en CSS ?

Échiquier CSS pur : exploration des divisions et évitement des classes et des identifiants

Tenter de créer un échiquier uniquement en utilisant CSS et en évitant l'utilisation de les classes ou les identifiants peuvent sembler une tâche ardue. Cependant, c'est une tâche qui a piqué la curiosité de beaucoup, y compris des programmeurs chargés de ce défi.

La mise en page HTML fournie se compose de nombreux

éléments, présentant un défi unique pour styliser le motif de l’échiquier. Les approches traditionnelles utilisant les sélecteurs nth-child() se sont révélées inefficaces.

Repenser l'approche

Au lieu de cibler directement des éléments individuels spécifiques, nous pouvons exploiter une approche différente qui implique modifier l'apparence d'éléments alternés au sein d'un groupe spécifique. C'est là que le pouvoir des pseudo-classes paires et impaires brille vraiment.

Par exemple, considérons un tableau :

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

En utilisant CSS, nous pouvons cibler des lignes et des colonnes alternées au sein ce tableau :

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

Cette règle CSS définit la couleur d'arrière-plan de cellules spécifiques en fonction de leur position dans les lignes et les colonnes. Ce faisant, un motif en damier est créé qui ressemble effectivement à un échiquier.

Élégant et efficace

Cette approche offre un moyen propre et efficace de créer un échiquier en utilisant du pur CSS, restant fidèle aux contraintes d'éviter les classes et les identifiants. Il met en valeur la polyvalence des sélecteurs CSS et leur capacité à cibler des éléments en fonction de leur position dans une structure donnée.

Ainsi, même si cela a pu sembler une approche non conventionnelle au départ, exploiter la puissance du pseudo impair et pair -les classes ont fourni la clé pour débloquer la solution.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn