仅当它是唯一具有给定类选择器的元素时才显示元素答案

【问题标题】：show element only if it is the only one with with the given class selector仅当它是唯一具有给定类选择器的元素时才显示元素
【发布时间】：2021-10-11 08:56:58
【问题描述】：

我有一种情况，我可能有也可能没有多个具有相同类名的元素。我需要根据某些条件仅从 css 显示其中一个。

案例 1：在下面的 html 中，如果 div 与 only info 类存在并且是唯一一个，它应该始终可见。

案例 2：如果有 两个 div 的 只有信息 类，它们都应该是可见。

案例 3：如果其中一个有 extra 类，则一个 only info 应该是可见。

案例4：如果只有一个具有info和extra类的div，它应该是visible。

这可能来自 css..？

示例：在下面的示例中，只有第二个 div 应该是可见的

<body>
  <div class="info extra">not visible</div>
  <div class="info">visible</div>
</body>

我试图实现它，但浏览器中尚不支持选择器。那我还有其他方法可以吗？

.extra {
    display:none;
}
.info:only-child:has(.browserversionnotice) {
    display:block
}

【问题讨论】：

你不能用 css 做到这一点
'另一种方法'是使用 JS。但是，这些数据是如何生成的？也许您只能加载需要显示的数据，而不是全部加载但隐藏它。
我没有选择从 JS 做，为了让情况更糟，我需要为 IE 做。

标签： html css css-selectors

【解决方案1】：

您的案例可以简化如下：

如果一个 div 是单独的，则始终可见（不管类）
如果有 2 个 div，那么我们只显示没有 .extra 类的那个

.extra {
    display:none;
}
.info:only-child {
    display:block
}

.info:not(.extra) {
  display:block;
}

<div>
  <div class="info">visible</div>
</div>
<hr>
<div>
  <div class="info extra">visible</div>
</div>
<hr>
<div>
  <div class="info extra">not visible</div>
  <div class="info">visible</div>
</div>
<hr>
<div>
  <div class="info extra">not visible</div>
  <div class="info extra">not visible</div>
</div>

【讨论】：

我认为他的意思是当 div 的 innerHTML 为空时，应该显示“不可见”。但如果这就是他删除 div 的意思，那么这就是正确答案 +1

【解决方案2】：

如果我正确理解了这个问题，那么单独使用 CSS 是不可能的。当页面加载时，您必须在 JavaScript 中检查这些条件以在满足这些条件时隐藏它们。

这是您可以做到的一种方法：

window.addEventListener("load", () => {
    let elms = document.querySelectorAll(".info");
    if (elms.length == 1) {
       return;
    }
    for (let i = 0; i < elms.length; i++) {
      if (elms[i].classList.length != 1) {
        elms[i].style.display = "none";
      }
    }
  });

https://codepen.io/CodeBorgg/pen/XWRxqaQ

【讨论】：