ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLでliの偶数列を選択する方法

HTMLでliの偶数列を選択する方法

醉折花枝作酒筹
リリース: 2023-01-05 16:10:57
オリジナル
3709 人が閲覧しました

「:nth-of-type()」セレクターを使用して、HTML 内の li の偶数列を選択できます。構文は「li:nth-of-type(even){}」です。 「:nth-of-type(n)」セレクターは、親要素の特定の型の子要素を照合します。値が偶数の場合は、偶数の要素と照合することを意味します。

HTMLでliの偶数列を選択する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

li:nth-of-type(even) {......} を使用すると、liの偶数列を選択できます。

例:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      #Ulist li:nth-of-type(even) {
        background: royalblue;
      }
    </style>
  </head>
  <body>
    <ul id="Ulist">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </body>
</html>
ログイン後にコピー

Effect :

HTMLでliの偶数列を選択する方法

推奨学習: html ビデオ チュートリアル

以上がHTMLでliの偶数列を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート