显示与可见性

Question

在我的一个页面中，我可以有两种情况。

第一个，以防找不到事件

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
        <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
        No event found!    </div>
</div>

或者如果至少找到事件则这样

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
      <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
        <div class="mec-wrap colorskin-custom">
    <div class="mec-event-list-minimal">
            <article data-style="" class="mec-event-article mec-clear  mec-divider-toggle mec-toggle-202003-1210" itemscope="">
ARTICLE HERE
    </article>
                        </div>
</div>
        <div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
        Nessun evento trovato!    </div>
    </div>

我需要隐藏第一种情况，我没看到"No events found" 我找到了 css 的解决方案。这工作正常，但如果我使用显示而不是可见性，代码将不起作用。 "display:none" 工作正常，但如果找到事件，我无法让它重新出现结构。我已经尝试了 "display" 的每个值（block、flex 等）没有人工作

https://codepen.io/MarcoRM69/pen/VwLrXWb

.mec-skin-list-events-container {  
visibility:hidden;  
}
.mec-skin-list-events-container > div {
  visibility:visible;
}

有什么建议吗？

Answer 1

display: none... 不起作用，而 visibility:hidden... 起作用，因为 display: none 从页面中删除了受影响的元素，而 visibility:hidden 没有。

由于 display:none 删除了包含的 div，您不能要求显示包含的 div。

From your codepen:

.mec-skin-list-events-container {  
  visibility:hidden; 
  /*display:none;*/

}
.mec-skin-list-events-container > div {
  visibility:visible;
  /*display:block;*/  
}

Answer 2

不幸的是，现代浏览器尚未实现 has() pseudo-class。

您可以使用 JavaScript 或 jQuery 之类的库轻松实现，而不是使用 CSS。 jQuery 实施 :has() selector.

Description: Selects elements which contain at least one element that matches the specified selector. The expression $( "div:has(p)" ) matches a <div> if a <p> exists anywhere among its descendants, not just as a direct child.

$('.mec-skin-list-events-container').addClass("d-none");
$('.mec-skin-list-events-container:has(div)').addClass("d-block");

body {
  color: green;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.mec-skin-list-events-container+div:not(:has(div)) {
  color: black;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
  <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
    Nessun evento trovato! </div>
</div>

<hr>

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
  <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
    <div class="mec-wrap colorskin-custom">
      <div class="mec-event-list-minimal">
        <article data-style="" class="mec-event-article mec-clear  mec-divider-toggle mec-toggle-202003-1210" itemscope="">
          ARTICLE HERE
        </article>
      </div>
    </div>
    <div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
      Nessun evento trovato! </div>
  </div>
</div>

显示与可见性

Display vs Visibility

html

css

hidden

visibility

display