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

根据MDN的第一个子选择器的定义如下：

：first-child CSS伪类表示作为其父元素的第一个子元素的任何元素。

但是，在您的情况下，.col-sm-1 div不是其父级的第一个或最后一个元素。他们分别是.form-group的第2和第4个孩子。这就是为什么样式没有应用于代码中的.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/

：first-child和：last-child选择器不在表单中工作

1 个答案: