孩子和：最后

<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有margin margin，第二个col-sm-1 div有margin-left。 有什么问题？ 请帮忙。

---

按照MDN定义的第一个孩子选择符如下：

The first-child CSS伪类表示任何元素，它是其父级的第一个子元素。

然而，在你的情况下， .col-sm-1 div并不是他们父母的第一或最后一个元素。 他们分别是.form-group第二和第四个孩子。 这就是为什么样式不能应用于代码中的.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/

链接地址: http://www.djcxy.com/p/87785.html

上一篇: child and :last

下一篇: style being reset to "none"