最后一种类型的选择器不按预期工作

Question

我想使用选择器最后一种类型来定位我的应用程序中的每个表单中的最后一个输入。

这就是HTML：

.form-input:last-of-type { 
 
      margin-bottom: 10px; 
 
     }

 <form role="form" 
 
      method="POST" 
 
      action="{{ route('login') }}"> 
 
      {{ csrf_field() }} 
 
      <div class="form-input"> 
 
       <label>Username</label> 
 
       <input id="email" 
 
        placeholder="Enter your email" 
 
        type="email" 
 
        name="email" 
 
        value="{{ old('email') }}" 
 
        required autofocus> 
 
      </div> 
 
      <div class="form-input"> <!-- That's the element I want to target--> 
 
       <label>Password</label> 
 
       <!-- or this one --> 
 
       <input id="password"     
 
        placeholder="Enter your password" 
 
        type="password" 
 
        name="password" 
 
        required>       
 
      </div> 
 

 
      <div class="buttonWrapper"> 
 
       <button type="submit">Login</button> 
 
      </div> 
 
      <div style="padding-bottom: 20px;" class="text--center"> 
 
       <a class="text--uppercase text--condensed" href=""> 
 
        Forgot Your Password? 
 
       </a> 
 
      </div> 
 
     </form>

基本上我想最后.FORM输入级有更多的填充，底部或最后.FORM输入的输入有更多margin-bottom（效果相同）。

我试图用这样的：

该代码的目标也是第一次输入，将每个输入之间的余量。

我也试过：最后一个孩子，但如果有更多的节点下我想要的目标不工作。

有没有办法解决这个问题？

Answer 1

代替<div> S和<label>的使用<fieldset> S和<legend>，是因为：

• 它使你的<form>语义完美。
• 它看起来更好
• 使用CSS如发现在DOM元素是非常有限，所以有<div> S和<span>到处都是会减轻你在得到具体的选择机会的主要手段。

现在你的布局是语义，并使用nth-of-type是没有道理的：

演示

fieldset:last-of-type { 
 
    margin-bottom: 50px; 
 
    border-color: red 
 
}

<form role="form" method="POST" action="{{ route('login') }}"> 
 
    {{ csrf_field() }} 
 
    <fieldset class="form-input"> 
 
    <legend>Username</legend> 
 
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Password</legend> 
 
    <input id="password" placeholder="Enter your password" type="password" name="password" required> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Username</legend> 
 
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Password</legend> 
 
    <input id="password" placeholder="Enter your password" type="password" name="password" required> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Username</legend> 
 
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Password</legend> 
 
    <input id="password" placeholder="Enter your password" type="password" name="password" required> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Username</legend> 
 
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Password</legend> 
 
    <input id="password" placeholder="Enter your password" type="password" name="password" required> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Username</legend> 
 
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Password</legend> 
 
    <input id="password" placeholder="Enter your password" type="password" name="password" required> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Username</legend> 
 
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus> 
 
    </fieldset> 
 
    <fieldset class="form-input"> 
 
    <legend>Password</legend> 
 
    <input id="password" placeholder="Enter your password" type="password" name="password" required> 
 
    </fieldset> 
 

 
    <div class="buttonWrapper"> 
 
    <button type="submit">Login</button> 
 
    </div> 
 
    <div style="padding-bottom: 20px;" class="text-center"> 
 
    <a class="text-uppercase text-condensed" href=""> 
 
       Forgot Your Password? 
 
      </a> 
 
    </div> 
 
</form>

Answer 2

按照我上面的评论，最后一种只适用于直接父，所以如果有周围的输入包装DIV，你就不能定位到表格的最后输入元素（这反而看过去该包装的输入）。你也很遗憾不能通过一个类来定位最后的“.form-input”。

我可以看到这样做没有用的东西不可靠像第n个孩子（和短编辑HTML添加一个额外的类或某事）的唯一方法是用JavaScript。幸运的是这很简单，以获得最后.FORM输入，并添加“去年”类，如果你不反对做这种方式：

document.querySelectorAll('form').forEach(function(el) { 
    el.querySelectorAll('.form-input')[el.querySelectorAll('.form-input').length-1].classList.add('last2'); 
}); 

编辑：更新，以处理所有形式。

Answer 3

可惜你不能在这样的情况下使用last-of-type。你可以实现通过包装所有form-input这样在一起了相同的结果：

<div class="form-input-container"> <!-- Apply margin here--> 
    <div class="form-input">...</div> 
    <div class="form-input">...</div> 
    .... 
</div> 
<div class="buttonWrapper"> 

Answer 4

的:last-of-type伪类的意思是“最后一个元素其在容器中键入（即使用此标签名称）“。在您的标记中，您要选择的元素不是容器中的最后一个div，因此它与选择器不匹配。

在CSS选择器级别3中，没有办法选择“具有某个类的最后一个元素”。在CSS选择器级别4中有这种可能性（在你的情况下，它将是:nth-last-child(1 of .form-input)），但它仅在Safari中受支持。

解决您的问题，有以下几种方式：

1. 使用不同的标签.form-input包装和其他包装，所以 你可以使用:last-of-type选择最后他们（作为 zer00ne建议）;
2. 假设.form-input包装之前总是在形式与其他的东西来了，你可以最后.form-input后的上边距添加到下一个元素，而不是底部边缘到.form-input，与选择类似如下：.form-input + :not(.form-input) { margin-top: 10px; }