简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

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

青灯夜游
リリース： 2022-05-18 18:40:21
オリジナル
2605 人が閲覧しました

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)」セレクターと組み合わせてよく使用され、親要素の奇数行の指定された子要素を選択するために使用されます

指定子元素: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 サイトの他の関連記事を参照してください。

関連ラベル：
css css3
ソース：php.cn
前の記事：CSS下部のダブルストロークの属性は何ですか？ 次の記事：HTML5でTDボーダーをキャンセルする方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
透明な半円の切り抜きのある Div CSS3だけで半円の透明な切り抜きを作りたいと思っています。唯一の要件は、形状を形成するすべての要素が黒または透明であることです。半円は透明で背景が透けて見える必要があるため、黒い...
から 2023-10-22 17:51:09
0
2
303
SVGで差し込み影を作成する方法 CSS3 にインライン ボックス シャドウがあるのと同じように、インライン シャドウを持つボックスを作成する必要があります。私がこれまでに見つけたのは、feGaussianBlur...
から 2023-10-21 15:57:11
0
2
232
CSS3 トランジションを使用してグラデーション背景を強化する CSSを使用してサムネイル画像にトランジションを作成し、ホバー時に背景がフェードインするようにしようとしています。変換は機能しませんが、rgba() 値に変更するだけでうまく機能し...
から 2023-10-12 18:05:11
0
2
213
グラデーションの背景で CSS3 トランジションを使用する CSSを使用してサムネイル画像にトランジションを作成し、ホバー時に背景がフェードインするようにしようとしています。変換は機能しませんが、rgba() 値に変更するだけで正常に機能し...
から 2023-08-23 21:25:42
0
2
324
背景画像にCSSフィルターを適用する方法 検索ページの背景画像として使用する JPEG ファイルがあり、Backbone.js コンテキストで作業しているため、CSS を使用してそれを設定しています:background-...
から 2023-08-23 14:06:46
0
2
189
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！