クラスや ID を使用せずに純粋な CSS を使用してチェス盤を作成できますか?

純粋な CSS チェスボードの作成: Div、クラスや ID なし

純粋な CSS 芸術の領域では、共通の課題が生じます。それは、次のような共通の課題です。クラスまたは ID。この領域における興味深いパズルの 1 つは、クラスや ID を使用せずに div のみを使用してチェス盤を作成することです。

この特定のタスクは、意欲的な CSS ウィザードを何日間も困惑させ、nth-child() とそのバリエーション。しかし、解決策は実現しないようです。

では、このとらえどころのないデザインの偉業を達成することは可能でしょうか?

興味深いことに、チェス盤はクラスや ID を使用せずに div を使用してレンダリングできますが、実現できる可能性があります。テーブルとして表現するのに適しています。これにより、スクリーン リーダーのアクセシビリティが向上し、ボード上の図形の位置を明確に伝えることができるようになります。

次の CSS スニペットを考えてみましょう:

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

この CSS は、内部にチェス盤パターンを効果的に作成します。テーブル構造。行と列の奇数と偶数の背景色を交互に変えると、おなじみの市松模様が現れます。

これは 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>

以上がクラスや ID を使用せずに純粋な CSS を使用してチェス盤を作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。