:nth-child(odd) 擬似クラスセレクターを使用して、奇数の位置にある子要素のスタイルを選択します。-CSSチュートリアル-php.cn

:nth-child(odd) 擬似クラスセレクターを使用して、奇数の位置にある子要素のスタイルを選択します。

WBOY

リリース： 2023-11-20 11:35:01

オリジナル

987 人が閲覧しました

:nth-child(odd) 擬似クラスセレクターを使用して、奇数の位置にある子要素のスタイルを選択します。

Web ページをデザインしているとき、ページ内のサブ要素に特別なスタイルを実行する必要がある場合があります。中でも、奇数位置の子要素を選択してスタイルを変更するための:nth-child (odd) 擬似クラスセレクターがよく使われます。次に、具体的なコード例を通じて、:nth-child(odd) 擬似クラスセレクターの使用方法を示します。

まず、親要素と複数の子要素を含む単純な HTML 構造を作成しましょう。コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>:nth-child(odd) 擬似クラス セレクターを使用して、奇数の位置にある子要素のスタイルを選択します。</title>
  <style>
    .parent {
      display: flex;
      justify-content: space-between;
      width: 80%;
      margin: 0 auto;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
    }
    .child:nth-child(odd) {
      background-color: #ffcccc;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</body>
</html>

ログイン後にコピー

この例では、まず複数の子要素を含む親要素を作成し、Flex レイアウトを使用して子要素を配置します。次に、子要素の基本スタイルの幅、高さ、背景色などの属性を設定します。次に、.child:nth-child(odd) セレクターで、:nth-child(odd) 擬似クラスセレクターを使用して、奇数の位置にある子要素を選択し、その背景色をピンクに設定します。。このように、:nth-child(odd) 擬似クラスセレクターを使用して、奇数の子要素のスタイルを簡単に変更できます。

このコードをブラウザで実行すると、奇数の位置にある子要素の背景色がピンクに変わり、偶数の位置にある子要素の背景色は灰色のままであることがわかります。これは、:nth-child(odd) 疑似クラスセレクターの使用例です。

実際の Web デザインでは、:nth-child (odd) 擬似クラスセレクターを使用して、奇数の位置にある子要素に特別なスタイルを設定することがよくあり、これにより、ページにより豊かなコンテンツを表示できます。この記事の例を通じて、誰もが :nth-child (odd) 擬似クラスセレクターを使用してページの子要素のスタイルを美しくできるようになることを願っています。

以上が:nth-child(odd) 擬似クラスセレクターを使用して、奇数の位置にある子要素のスタイルを選択します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。