显示与可见性

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>

我需要隐藏第一种情况，我没有看到“未找到事件”我已经找到了CSS的解决方案。这工作正常，但如果我使用显示而不是可见性，代码将无法工作。“显示：无”工作正常，但如果发现事件，我无法使其重新出现结构。我已经尝试了“显示”的每个值（块、弯曲等），但没有人工作

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

.mec-skin-list-events-container {  

visibility:hidden;  

}

.mec-skin-list-events-container > div {

  visibility:visible;

}

有什么建议么？

Answer 1

不幸的是，现代浏览器还没有实现has()伪类。您可以使用 JavaScript 或 jQuery 等库轻松实现这一点，而不是使用 CSS。jQuery 实现:has()选择器。描述：选择至少包含一个与指定选择器匹配的元素的元素。如果 a存在于其后代中的任何位置，而不仅仅是作为直接子代，则该表达式$( "div:has(p)" )匹配 a 。<div><p>$('.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>

Answer 2

display: none...不工作，而正在visibility:hidden...工作，因为display: none从页面中删除受影响的元素，visibility:hidden而不工作。由于display:none删除了包含的 div，因此您不能要求显示包含的 div。从你的代码笔：.mec-skin-list-events-container {&nbsp;&nbsp;&nbsp; visibility:hidden;&nbsp;&nbsp; /*display:none;*/}.mec-skin-list-events-container > div {&nbsp; visibility:visible;&nbsp; /*display:block;*/&nbsp;&nbsp;}