最初のラベルのみにアクセスするにはどうすればよいですか？

Question

最初のラベルのみにアクセスするにはどうすればよいですか？改訂

<form class="login" method="post" action="https://stackoverflow.com/users/login"> 
     <div class="form-group"> 
     <label>Username</label> 
     <input type="text" class="form-control" name="username" placeholder="Username"> 
     </div> 
     <div class="form-group"> 
     <label>Password</label> 
     <input type="password" class="form-control" name="password" placeholder="Password"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 

Answer 1

\：：

.login .form-group:first-child label{ 
    margin-top: 4%; 
    display: inline-block; 
} 

Answer 2

.form-group:first-child label{ 
    margin-top: 4%; 
} 

Answer 3

アクセス最初のフォームグループとそのラベル：

しかし私は、私は何の結果を得なかっ

.form-group label:nth-child(1){ 
    margin-top: 4%; 
} 

で試してみました

.form-group:first-child > label { 
    display: inline-block; 
    margin-top: 4%; 
} 

編集：これは、「ユーザー名」のラベルのみを対象としていることを前提としています。

Answer 4

あなたのCSSがのために行くので、それはすべての.form-group要素にラベル（ごと意味する）をすべての-最初です。
最初に.form-groupのラベルに変更する必要があります。

.form-group:first-child label { 
//code 
} 

Answer 5

:nth-childの使用は、同じ親を持つ要素を選択することです。簡単な言葉では、あなたは以下のようなHTMLを持っていると言う：

<div> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 

span:nth-child(1)は、タグ名spanとdivの最初の子です。しかし、あなたはHTMLの下で同じセレクタを適用した場合（あなたの場合のように）：

<div> 
    <span></span> 
</div> 
<div> 
    <span></span> 
</div> 

選択した要素であり、両方のspan両方spanがdiv