Question

我在html中嵌套了<hr>标签，没有使用指定的遍历，如何使用css而不是js隐藏最后一小时？我可以使用js跳过循环，但我想使用纯css，不确定为什么:nth-of-type(1)隐藏所有<hr>

<div class="modal-body">
  <div class="row">
    <div class="m-l-20 m-r-20">
      <div><strong class="m-b-10">Indonesia</strong></div>
      <div>
        <div class="item">
          <label>
        <div class="item">
          <label>
            <span>Lazada ID</span></label>
        </div>
      </div>
      <hr>
    </div>
    <div class="m-l-20 m-r-20">
      <div><strong class="m-b-10">Malaysia</strong></div>
      <div>
        <div class="item">
          <label>
            <span>Lazada MY</span></label>
        </div>
        <div class="item">
          <label>
            <span>Lelong MY</span></label>
        </div>
      </div>
      <hr>
    </div>
    <div class="m-l-20 m-r-20">
      <div><strong class="m-b-10">Others</strong></div>
      <div>
        <div class="item">
          <label>
            <span>Alibaba</span></label>
        </div>
      </div>
      <hr>
    </div>
  </div>
</div>

https://jsfiddle.net/g59e21ps/1/

Answer 1

:nth[-last]-of-type是其父元素中给定标记类型的第n个最后子 - 而不是整个文档中的第n个最后一个匹配。您可以使用子组合子<hr>找到属于最后一个孩子的孩子的>：

.modal-body :last-child > hr {
  display: none;
}

updated fiddle

Answer 2

你的解决方案就在这里......

.modal-body .row div:last-child hr {
    display: none;
}

Answer 3

请尝试以下代码段。

＆＃13;

.modal-body .row div:last-child hr {
  display: none;
}

＆＃13;

<div class="modal-body">
  <div class="row">
    <div class="m-l-20 m-r-20">
      <div><strong class="m-b-10">Indonesia</strong></div>
      <div>
        <div class="item">
          <label>
            <div class="sa-checkbox theme__blue checked" style="position: relative;">
              <input type="checkbox" cursor="false" name="5a60626f1d41c80c8d3f8a85" value="on" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0; cursor: pointer;"></ins></div><span>Bukalapar</span></label>
        </div>
        <div class="item">
          <label>
            <span>Lazada ID</span></label>
        </div>
      </div>
      <hr>
    </div>
    <div class="m-l-20 m-r-20">
      <div><strong class="m-b-10">Malaysia</strong></div>
      <div>
        <div class="item">
          <label>
            <span>Lazada MY</span></label>
        </div>
        <div class="item">
          <label>
            <span>Lelong MY</span></label>
        </div>
      </div>
      <hr>
    </div>
    <div class="m-l-20 m-r-20">
      <div><strong class="m-b-10">Others</strong></div>
      <div>
        <div class="item">
          <label>
            <span>Alibaba</span></label>
        </div>
      </div>
      <hr>
    </div>
  </div>
</div>

＆＃13;

使用css隐藏循环中的最后一小时

3 个答案: