Question

为什么最后一个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 ;
}

Answer 1

如果保留此HTML结构，则无法使用:last-of-type执行此操作。

如果你做了后备，你可以使用nth-child，但那是CSS3并且不受几个浏览器版本的支持，所以不是最佳的。

正如 @David Thomas 所说：:last-of-type不处理这些元素的类名或属性，而是处理元素本身。你有一个fieldset，你已经放置了4个div，你试图删除最后一个的边框，但这实际上不是最后一个，而是第三个...如果你有效在fieldset中有三个div并使用它：

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

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

CSS选择器：last-of-type表现不尽如人意

1 个答案: