如何使用 css 将 hr 隐藏在最后一里

Question

我需要隐藏最后一个 <li>

中的 <hr>

<div class="search-wrappper">
   <ul>
      <li>
         <a href="#">
            <h3>Headline</h3>
            <p class="ellipses">Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor  sit amet Lorem ipsum dolor sit amet</p>
         </a>
         <hr />
      </li>
      <li>
         <a href="#">
            <h3>Headline</h3>
            <p class="ellipses">Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
         </a>
         <hr />
      </li>
      <li>
         <h3>Headline</h3>
         <p class="ellipses">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet dolor sit amet  dolor sit amet </p>
         <hr />
      </li>
      <li>
         <h3>Headline</h3>
         <p class="ellipses">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum Lorem ipsum dolor  dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>

我可以使用以下 css

定位最后一个 li

.search-wrapper > ul > li:last-child {
  background: red;
}

我不确定如何在最后一个 li

中隐藏 hr 标签

Answer 1

您可以通过

select child

.search-wrapper > ul > li:last-child hr{

你也可以使用

.search-wrapper > ul > li:last-child > hr{

如何使用 css 将 hr 隐藏在最后一里

How to hide hr inside the last li using css

html

css

css-selectors