ホームページ > 記事 > ウェブフロントエンド > CSSでoddを使用できますか?
CSSでoddを使用できますか?
- 青灯夜游オリジナル
- 2022-05-18 18:40:212772ブラウズ
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)
は、3 の倍数である p 個の要素に背景色を追加することを意味します。2n は 2 の倍数、4n は 4 の倍数など、
は、すべての奇数の p 要素に背景色を追加することを意味します
# #p:nth-child(even)
すべての偶数 p 要素に背景色を追加することを示します
注: 式内の n は大文字と小文字が区別されません
p の形式で記述することはできません:nth-child(2n 1)
これは単に p:nth-child(odd)
# と同等であると理解できます。 p:nth-child(2n 0)
これは単に p:nth-child(even)
(学習ビデオの共有:
css ビデオ チュートリアル、
以上がCSSでoddを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。