在我的一個頁面中，我可以有兩種情況。第一個，以防沒有發現事件<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;}有什么建議么？
1 回答
FFIVE
TA貢獻1797條經驗 獲得超6個贊
不幸的是，現代瀏覽器還沒有實現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>
慕娘9325324
TA貢獻1783條經驗 獲得超4個贊
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;*/
}
- 1 回答
- 0 關注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消