htmlとcssを使用しているn番目の子が動作していない

n番目の子供をテストするための簡単なhtmlコードを作成しましたが、それは私のためには機能しません。 1以外の子セレクタに入れた値はどうですか？htmlとcssを使用しているn番目の子が動作していない

.username{ 
 
\t margin-bottom: 20px; 
 
} 
 
.username:nth-child(n + 2){ 
 
\t margin-left: 100px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>forms</title> 
 
\t <link rel="stylesheet" type="text/css" href="../css/form.css"> 
 
</head> 
 
<body> 
 
    <form action="" method="post"> 
 
\t <div class="username"> 
 
\t <input type="text" name="First_Name" value="First Name"> 
 
     <input type="text" name="Middle_Name" value=" Middle Name"> 
 
\t <input type="text" name="Last_Name" value="Last Name"> 
 
\t </div> 
 
\t <input type="radio" name="gender" value="Male">Male<br> 
 
\t <input type="radio" name="gender" value="Female">Female<br> 
 
\t <input type="submit" name="submit" value="Submit"> 
 
    </form> 
 
</html>

私はこれをどのように修正すればよいですか？

出典

2017-05-25 Tien Ngo

実際には、nth-childは、 "nth"要素の同時性を探します。あなたの "username" divでnth-child（n + 2）を呼び出すと、 "username" divのすべてのocurrenciesを探しています。存在しない場合、 "username"したがって、nth-child（1）を使用する場合にのみ機能します。あなたはすべての「入力」の要素は、同じかおろし金2つは、あなたの「ユーザ名」のdivの内側に、余裕を持って、あなたはそれを行う必要がある場合

：

.username input:nth-child(n+3){ 
    margin-left: 100px; 
}

をあなたは、2つのまたは3つ以上の入力を置くことができます"nth-child"の値を（n + 1）、（n + 2）、および（n + 3）に変更して何が起きているかを確認してください。

"nth-child"は "1"で始まることに注意してください。

.username{ 
 
\t margin-bottom: 20px; 
 
} 
 
.username input:nth-child(n+3){ 
 
\t margin-left: 100px; 
 
    border: 1px solid red; 
 
}

<form action="" method="post"> 
 
\t \t <div class="username"> 
 
\t \t \t <input type="text" name="First_Name" value="First Name"> 
 
\t \t \t <input type="text" name="Middle_Name" value=" Middle Name"> 
 
\t \t \t <input type="text" name="Last_Name" value="Last Name"> 
 
     <input type="text" name="Last_Name" value="Last Name"> 
 
     <input type="text" name="Last_Name" value="Last Name"> 
 
\t \t </div> 
 
\t \t <input type="radio" name="gender" value="Male">Male<br> 
 
\t \t <input type="radio" name="gender" value="Female">Female<br> 
 
\t \t <input type="submit" name="submit" value="Submit"> 
 
\t \t 
 
\t </form>

出典

2017-05-25 03:43:59

あなたは、n番目の子を適用すべきタグの名前を書いていません。 .username {

margin-bottom: 20px;

}

.username入力：n番目の子（N + 2）{

background-color:red;

}

出典

2017-05-25 06:41:05

htmlとcssを使用しているn番目の子が動作していない

答えて

関連する問題