CSS选择器：last-of-type表现不理想

Evanss 发表于 Dev

埃文斯

为什么最后一个div.form-form-element-wrapper具有底部边框？我认为：last-of-type选择器会删除边框。

<fieldset>
  <legend>details</legend>
    <div class="form-form-element-wrapper">
      <div>
        <div> 
          <label>Name</label>
       </div>
       <div> 
         <input type="text" maxlength="128" value="dsf sdf sdafs">
      </div>
      <div>
    </div>
  </div>
</div>
<div class="form-form-element-wrapper">
  <div>
    <div> 
      <label>Bank</label>
    </div>
    <div> 
      <select>
        <option value="" selected="selected">---Please select a bank---</option>
      </select>
    </div>
  <div class="form-error"></div>
</div>
</div>
<div class="form-form-element-wrapper">
  <div>
    <div class="form-label"> <label>Length</label>
  </div>
<div> 
  <select>---Please select period---</option>
  </select>
</div>
  <div class="form-error"></div></div>
</div>
  <div class="form-markup-wrapper">
  <p class="bold">Make </p>
  </div>
</fieldset>

.form-form-element-wrapper {
  border-bottom: 5px solid gold; 
  position: relative;
}
.form-form-element-wrapper:last-of-type {
  border-bottom: none ;
}

黑色的

:last-of-type如果保留此HTML结构，则无法做到这一点。

如果您进行了后备操作，则可以使用nth-child，但是CSS3几个浏览器版本均不支持，因此并非最佳选择。

正如@David Thomas所说：:last-of-type不会处理这些元素的类名或属性，而是元素本身。您fieldset在其中放置了4个div，并尝试删除最后一个的边框，但这实际上不是最后一个的边框，而是第三个边框...如果您在其中有三个div，则可以正常工作fieldset并像这样使用它：

fieldset div:last-of-type { border-bottom: none; }，但现在情况并非如此。

您有两个选择：更改HTML结构或使用CSS3。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。