Как я могу получить доступ только к первой метке?

Question

Как я могу получить доступ только к первой этикетке? Я попытался с

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

однако я не получил никакого результата: \

<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: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) является первым ребенком div с тегом имя-span. Но, если применить тот же селектор с ниже HTML (как в вашем случае):

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

Отдельные элементы как span, потому что оба span пришел первым в их родителя, который div