主页 / coding / 问题 / 78850359
Accepted
rctneil
Asked: 2024-08-09 04:37:07 +0800 CST

CSS 有与无问题

  • 772

我怎样才能隐藏.statistics-list包含ul没有 的的？li

.statistics-section {
  border: 2px solid red;
}

.statistics-section:has(ul:has(:not(li))) {
  display: none;
}
<div class="statistics-section">
  <h2>Hello 1 - This should be visible</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class="statistics-section">
  <h2>Hello 2 - This should be hidden</h2>
  <ul></ul>
</div>

css

2 个回答

  1. Best Answer

    测试是否有li。无需ul在选择中包含

    .statistics-section {
  border: 2px solid red;
}

.statistics-section:not(:has(li)) {
  display: none;
}
    <div class="statistics-section">
  <h2>Hello 1 - This should be visible</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class="statistics-section">
    <h2>Hello 2 - This should be hidden</h2>
  <ul></ul>
</div>

    或者测试一个空的 ul

    .statistics-section {
  border: 2px solid red;
}

.statistics-section:has(ul:empty) {
  display: none;
}
    <div class="statistics-section">
  <h2>Hello 1 - This should be visible</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class="statistics-section">
    <h2>Hello 2 - This should be hidden</h2>
  <ul></ul>
</div>

    • 4

  2. 您还可以隐藏那些错误的 ul>li

    .statistics-section {
  border: 2px solid red;
}

.statistics-section:not(:has(ul > li)) {
  display: none;
}
    <div class="statistics-section">
  <h2>Hello 1 - This should be visible</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class="statistics-section">
  <h2>Hello 2 - This should be hidden</h2>
  <ul></ul>
</div>

    • 1

相关问题