时间戳

首页 > 解决方案 > 仅当它是唯一具有给定类选择器的元素时才显示元素

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

问题描述

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

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

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

案例 3：如果其中一个有额外的类，那么一个只有信息的应该是可见的。

案例 4：如果只有一个 div 包含info 和 extra类，它应该是可见的。

这可能来自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
}

标签： htmlcsscss-selectors

解决方案

如果我正确理解了这个问题，那么仅靠 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

推荐阅读