CSS 学習セレクター:nth-child(n)_html/css_WEB-ITnose

例えば、ウェブサイトでは、マウスで行をタッチすると、行の色の変化を実現できます。 、特にデータベースに接続するときは、背景の色が変わります。シンプルなコードは非常に重要です

このとき、興味深い友達が現れ、:nth-child(n) はそこにジャンプし続け、「私を探して」と言いました。これは、親要素に属する N 番目の子要素を 0 から一致させるセレクターを指します。たとえば、p:nth-child(2) は、下付き文字 2 を持つ p 要素を指します。これは、必要に応じて 3 番目の要素です。奇数と偶数の異なる行を実現するには、奇数を直接使用し、偶数を使用する場合は (2n+1)、(2n) を使用することもできます。その効果は次のとおりです。以下と同じ:

.history-content:nth-child(2n+1) {	background: #D8F0E7;}.history-content:nth-child(2n) {	background: #eee;}.history-content:hover {	background: #fff;}

最終的な効果は次のようになります。灰色が 1 行、緑が 1 行あり、タッチすると白になります

新人学習者、より良いアイデアがある場合は、共有してください。は

著作権表示: この記事はブロガーによるオリジナル記事であり、ブロガーの許可なく複製することはできません。