アプローチを再考する

特定の個々の要素を直接ターゲットにする代わりに、次のような別のアプローチを活用できます。特定のグループ內(nèi)の交互の要素の外観を変更します。ここで、奇數(shù)および偶數(shù)の擬似クラスの威力が真に発揮されます。

たとえば、テーブルについて考えてみましょう。

<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 を使用すると、內(nèi)部の交互の行と列をターゲットにできます。このテーブル:

<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 ルールは、行と列內(nèi)の位置に基づいて特定のセルの背景色を設(shè)定します。そうすることで、チェス盤に効果的に似たチェッカーボード パターンが作成されます。

エレガントで効率的

このアプローチは、純粋なチェス盤を使用してチェス盤を作成するクリーンで効率的な方法を提供します。 CSS、クラスと ID を避けるという制約を忠実に守ります。これは、CSS セレクターの多用途性と、特定の構(gòu)造內(nèi)での位置に基づいて要素をターゲットにする機(jī)能を示しています。

したがって、最初は型破りなアプローチのように見えたかもしれませんが、奇數(shù)および偶數(shù)の擬似の力を利用しています。 -classes は、ソリューションのロックを解除する鍵を提供しました。

以上がCSS でクラスや ID を使用せずにチェス盤を作成するにはどうすればよいでしょうか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。