CSS疑似クラスnth-childの使い方-CSSチュートリアル-php.cn

CSS疑似クラスnth-childの使い方

不言

リリース： 2018-12-08 17:48:19

オリジナル

4739 人が閲覧しました

CSS に擬似クラス CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方があります。この擬似クラスを使用するにはどうすればよいですか?次の記事ではCSSでの擬似クラスCSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方の使い方を紹介します。具体的な内容を見ていきましょう。

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方は、セレクターに条件を追加し、n 番目 (n 番目) の子要素にスタイルを適用できるようにする疑似クラスです。

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方は、多くの項目を含むテーブルで見やすくするために背景色を交互に変更する場合に非常に役立ちます。

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方の使い方を見てみましょう

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方は次のように記述されています

元素:CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方(值){样式的内容}

ログイン後にコピー

数字のほかに 2n 1式以外にも、even (偶数) などを値として設定できます。

偶数のみに適用: 2n または Even
奇数のみに適用: 2n 1 または奇数

他の状況もあります。具体的なアプリケーション例を見てみましょう

まず、HTML コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<ul type="square">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
</ul>
</body>
</html>

ログイン後にコピー

実行中の効果は次の図に示すとおりです。

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方

次に、 nth - child を使用し、背景色が #add8e6 で特定のリスト項目にのみ適用されるように設定します。

偶数を選択した場合の状況

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方の値は偶数または2nに設定されます

CSSコード

ul li:CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方(even){
	background-color: skyblue;
}

ログイン後にコピー

ブラウザ上に以下の効果を表示

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方

##奇数を選択した場合##の値CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方は奇数または 2n に設定されます。 1

CSS コード

ul li:CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方(odd){
	background-color: skyblue;
}

ログイン後にコピー

はブラウザに次の効果を表示します

CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方

n 個の要素の最初のケースのみを選択

n 番目の子の値に適用する項目番号を入力します。ここでは 3 を入力します。

CSSコード

ul li:CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方(3){
	background-color: skyblue;
}

ログイン後にコピー

ブラウザでの表示効果は以下の通りです

CSS疑似クラスnth-childの使い方

n番目以降を選択してください要素の場合

n ～ n 番目 - 子適用を開始する項目の値を入力します。こちらがn4です。

CSS コード

ul li:CSS疑似クラスCSS疑似クラスCSS疑似クラスnth-childの使い方の使い方の使い方(n+4){
	background-color: skyblue;
}

ログイン後にコピー

ブラウザ上で実行した場合の効果は次のとおりです

CSS疑似クラスnth-childの使い方

以上がCSS疑似クラスnth-childの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。