html - :first-child and :last-child selector not working in form

Question

<form name="addUserTaskForm" id="addUserTaskForm" class="form-horizontal" action='<c:url value="/task/saveTask"/>' method="POST">

 <input type="hidden" value="${LOGGEDIN_USER.id}" name="user"/>

<div class="form-group required">
  <label class="col-sm-3 control-label">Task</label>
  <div class="col-sm-4">
      <select name="task" id="task" class="form-control">
                    <option value="" selected>Select Task</option>
                        <c:forEach items="${tasks}" var="taskVar">
                            <option value="${taskVar.id}" >${taskVar.lookupValueLabel}</option>
                        </c:forEach>
     </select>

    </div>
     <div id="task_error"></div>
</div>

<div class="form-group">
    <label for="inputEmail3" class="col-sm-3 control-label">Work Item</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="ticketId" name="ticketId">

    </div>
     <div id="ticketId_error"></div>
  </div>

<div class="form-group required">
  <label class="col-sm-3 control-label">Time</label>
  <div class="col-sm-1">
      <select name="workedHours" id="workedHours" class="form-control">
                    <option value="" selected>Select</option>
                    <option value="0">0</option>
            <option value="1" >1</option>
            <option value="2" >2</option>
            <option value="3" >3</option>
            <option value="4" >4</option>
            <option value="5" >5</option>
            <option value="6" >6</option>
            <option value="7" >7</option>
            <option value="8" >8</option>
            <option value="9" >9</option>
            <option value="10" >10</option>
            <option value="11" >11</option>
            <option value="12" >12</option>
            <option value="13" >13</option>
            <option value="14" >14</option>
            <option value="15" >15</option>
            <option value="16" >16</option>
            <option value="17" >17</option>
            <option value="18" >18</option>
            <option value="19" >19</option>
            <option value="20" >20</option>
            <option value="21" >21</option>
            <option value="22" >22</option>
            <option value="23" >23</option>
            <option value="24" >24</option>
        </select>

    </div>
    <span class="col-sm-1" id="hours_span">hrs</span>


    <div class="col-sm-1">
     <select name="workedMinutes" id="workedMinutes" class="form-control">
        <option value="" selected>Select</option>
        <option value="">0</option>
        <option value="15" >15</option>
        <option value="30" >30</option>
        <option value="45" >45</option>
    </select>

   </div>
   <span class="col-sm-1" id="minutes_span">mins</span>

<div id="time_error"></div>

</div>

<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Comments</label>
    <div class="col-sm-4">
  <textarea class="form-control" rows="4" cols="50" id="comments" name="comments"></textarea>
  </div>
</div>

<div class="text-center">
<input class="btn btn-primary" type="submit" value="Save" >
<input class="btn btn-primary" type="reset" value="Reset" >
</div>

</form>


#addUserTaskForm .form-group div.col-sm-1{
        width:45%;
    }
    #addUserTaskForm .form-group div.col-sm-1:first-child{
        margin-bottom:5px;
    }
    #addUserTaskForm .form-group div.col-sm-1:last-child{
        margin-left:35%;
    }

上面是我的html和对应的css。

在 css 中，将应用宽度 45%，但不应用其他两个带有 :first-child 和 :last-child 选择器的规则。我希望第一个 col-sm-1 div 有边距底部，第二个 col-sm-1 div 有边距。有什么问题？请帮忙。

Answer 1

:first-child 选择器的定义根据 MDN如下:

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

但是，在您的情况下，.col-sm-1 div 不是其父元素的第一个或最后一个元素。它们分别是 .form-group 的第二个和第四个 child 。这就是为什么样式未应用于代码中的 .col-sm-1 的原因。

您可以使用 nth-child 属性来定位 CSS 中的 .col-sm-1 元素，如下所示:

#addUserTaskForm .form-group div.col-sm-1{
    width:45%;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(2){
    margin-bottom:5px;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(4){
    margin-left:35%;
}

JSFiddle:https://jsfiddle.net/hchw6Ljm/2/