显示与可见性

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 {  

  visibility:hidden; 

  /*display:none;*/

}

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

  visibility:visible;

  /*display:block;*/  

}