CSSでoddを使用できますか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSSでoddを使用できますか?

青灯夜游

May 18, 2022 pm 06:40 PM

css css3

odd は CSS で使用できます。 CSS では、odd は、指定された要素を選択するための擬似クラスセレクターのキーワードとして使用できます。多くの場合、奇数行の指定された子要素を選択するための ":nth-child()" セレクターのパラメーターとして使用されます。親要素に「子要素:nth-child(odd){//css style}」を指定する構文です。

CSSでoddを使用できますか?

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

odd は CSS で使用できます。

odd は「奇数」を意味し、CSS では擬似クラスセレクターで指定した要素をキーワードとして選択することができます。

odd は、セレクターのパラメーターとして「:nth-child(n)」セレクターと組み合わせてよく使用され、親要素の奇数行の指定された子要素を選択するために使用されます

1	`指定子元素:nth-child(odd){//css样式}`

ログイン後にコピー

説明 : 奇数に関連して、偶数 (偶数) というキーワードもあります。これは、":nth-child(n)" セレクターと組み合わせて使用され、偶数行の指定された子要素を選択します。親要素

例: テーブルの交互の行の色を実現します。

つまり、奇数行に 1 色、偶数行に 1 色を使用します。 rows

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            tr:nth-of-type(even){
                background:red;
            }
            tr:nth-of-type(odd){
                background:pink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>商品</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>T恤</td>
                <td>￥100</td>
            </tr>
            <tr>
                <td>牛仔褂</td>
                <td>￥250</td>
            </tr>
            <tr>
                <td>牛仔库</td>
                <td>￥150</td>
            </tr>
        </table>
    </body>
</html>

ログイン後にコピー

CSSでoddを使用できますか?

知識を広げる：

:nth-child(n)セレクターは n 番目に一致します親要素内の子要素。パラメータは要素のインデックスです。インデックスは1から始まります。

n には、数値、キーワード、または数式を指定できます。

:nth-child は CSS3 が提供する便利なセレクターです。プロジェクトで頻繁に使用されるため、一般的なメソッドを簡単にまとめます。以下のサンプルコードのスクリーンショットが使用されています。同じ例です。 . p 要素の親要素はすべて body

p:nth-child(2)

で、2 番目の p 要素に背景色を追加することを意味します。 nth-child(3) は 3 番目の p 要素、以下同様です

CSSでoddを使用できますか?

#p:nth-child(2)

上記の例に従い、ここで p 要素の前に他の要素がある場合、結果は以下のようになり、上記の例の段落 2 の代わりに段落 1 に背景色が追加されます。ここで、p:nth-child(1) は h1 要素であるため、p:nth-child(2) は p 要素です

CSSでoddを使用できますか? p:nth-child ( 3n)

は、3 の倍数である p 個の要素に背景色を追加することを意味します。2n は 2 の倍数、4n は 4 の倍数など、

CSSでoddを使用できますか? p:nth-child(odd)

は、すべての奇数の p 要素に背景色を追加することを意味します

# #p:nth-child(even) CSSでoddを使用できますか?

すべての偶数 p 要素に背景色を追加することを示します

式を使用します ( an b)、説明: サイクルの長さを示します。n はカウンタ (0 から始まります)、b はオフセット値です。

CSSでoddを使用できますか? さらに、an を書き込む必要があるという事実に特別な注意を払う必要があります。 b の前にあり、b an

注: 式内の n は大文字と小文字が区別されません

p の形式で記述することはできません:nth-child(2n 1) CSSでoddを使用できますか?

これは単に p:nth-child(odd)

# と同等であると理解できます。 p:nth-child(2n 0) CSSでoddを使用できますか?

これは単に p:nth-child(even)

# と同等であると理解できます。 ##p:nth-child(n 2)

CSSでoddを使用できますか?

2 番目の p 要素 (2 番目の p 要素を含む) から最後の p 要素までの前方範囲を示し、背景色 (ここでの範囲は 2 ～ 5 を指します)

p:nth-child(-n 5)

CSSでoddを使用できますか?

は負の範囲を表します。最後の p 要素 (最後の要素を含む) から最初の p 要素までの背景色を追加します (ここでの範囲は 5-1 を指します)

(学習ビデオの共有:

css ビデオチュートリアル

、 CSSでoddを使用できますか? Web フロントエンド

)

以上がCSSでoddを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1664

CakePHP チュートリアル

1421

Laravel チュートリアル

1315

PHP チュートリアル

1266

C# チュートリアル

1239

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。