最後一種類型的選擇器不按預期工作

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; }