ホームページ > 記事 > ウェブフロントエンド > CSS でクラスや ID を使用せずにチェス盤を作成するにはどうすればよいでしょうか?
純粋な CSS チェスボード: Div の調査とクラスと ID の回避
CSS のみを使用してチェスボードを作成し、クラスや ID は困難な作業のように思えるかもしれません。しかし、これは、この課題を割り当てられたプログラマを含む、多くの人々の好奇心をそそるタスクです。
提供された HTML レイアウトは、多数のネストされた
アプローチを再考する
特定の個々の要素を直接ターゲットにする代わりに、次のような別のアプローチを活用できます。特定のグループ内の交互の要素の外観を変更します。ここで、奇数および偶数の擬似クラスの威力が真に発揮されます。
たとえば、テーブルについて考えてみましょう。
<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>
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 ルールは、行と列内の位置に基づいて特定のセルの背景色を設定します。そうすることで、チェス盤に効果的に似たチェッカーボード パターンが作成されます。
エレガントで効率的
このアプローチは、純粋なチェス盤を使用してチェス盤を作成するクリーンで効率的な方法を提供します。 CSS、クラスと ID を避けるという制約を忠実に守ります。これは、CSS セレクターの多用途性と、特定の構造内での位置に基づいて要素をターゲットにする機能を示しています。
したがって、最初は型破りなアプローチのように見えたかもしれませんが、奇数および偶数の擬似の力を利用しています。 -classes は、ソリューションのロックを解除する鍵を提供しました。
以上がCSS でクラスや ID を使用せずにチェス盤を作成するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。