CSSでoddを使用できますか?
odd は CSS で使用できます。 CSS では、odd は、指定された要素を選択するための擬似クラス セレクターのキーワードとして使用できます。多くの場合、奇数行の指定された子要素を選択するための ":nth-child()" セレクターのパラメーターとして使用されます。親要素に「子要素:nth-child(odd){//css style}」を指定する構文です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
odd は CSS で使用できます。
odd は「奇数」を意味し、CSS では擬似クラスセレクターで指定した要素をキーワードとして選択することができます。
odd は、セレクターのパラメーターとして「:nth-child(n)」セレクターと組み合わせてよく使用され、親要素の奇数行の指定された子要素を選択するために使用されます
指定子元素: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>
知識を広げる ：
:nth-child(n)セレクターは n 番目に一致します親要素内の子要素。パラメータは要素のインデックスです。インデックスは1から始まります。
n には、数値、キーワード、または数式を指定できます。
:nth-child は CSS3 が提供する便利なセレクターです。プロジェクトで頻繁に使用されるため、一般的なメソッドを簡単にまとめます。以下のサンプルコードのスクリーンショットが使用されています。同じ例です。 . p 要素の親要素はすべて body
p:nth-child(2)
で、2 番目の p 要素に背景色を追加することを意味します。 nth-child(3) は 3 番目の p 要素、以下同様です
#p:nth-child(2)
p:nth-child ( 3n)
は、3 の倍数である p 個の要素に背景色を追加することを意味します。2n は 2 の倍数、4n は 4 の倍数など、
p:nth-child(odd)
は、すべての奇数の p 要素に背景色を追加することを意味します
# #p:nth-child(even)
すべての偶数 p 要素に背景色を追加することを示します
さらに、an を書き込む必要があるという事実に特別な注意を払う必要があります。 b の前にあり、b an
注: 式内の n は大文字と小文字が区別されません
p の形式で記述することはできません:nth-child(2n 1)
これは単に p:nth-child(odd)
# と同等であると理解できます。 p:nth-child(2n 0)
これは単に p:nth-child(even)
(学習ビデオの共有:
css ビデオ チュートリアル、
Web フロントエンド
以上がCSSでoddを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1663
14
1420
52
1313
25
1266
29
1239
24
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サイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
