JSP页面中div为空时隐藏对应hr标签的优雅实现方案咨询

方案1：JSP逻辑预判断（最推荐） #

提前将所有按钮条件的或运算结果存为页面变量，直接用该变量控制顶部hr的渲染，兼容性最好，逻辑清晰易维护。
代码示例：

...
<!-- 预先判断是否存在符合展示条件的按钮 -->
<c:set var="hasActionBtns" value="${condition1 || condition2 || condition3}" />

<!-- 仅当存在按钮时渲染顶部hr -->
<c:if test="${hasActionBtns}">
    <hr>
</c:if>
<div class="actions">
    <div class="btn-toolbar">
        <c:if test="${condition1}">
            <button type="button" class="btn" >
                btn1
            </button>
        </c:if>
        <c:if test="${condition2}">
            <button type="button" class="btn">
                btn2
            </button>
        </c:if>
        <c:if test="${condition3}">
            <button type="button" class="btn">
                btn3
            </button>
        </c:if>
    </div>
</div>
<hr> 
...

后续新增按钮条件时，只要更新hasActionBtns的或运算表达式即可，维护成本很低。

方案2：CSS纯前端控制（适合快速修复） #

如果不想修改JSP业务逻辑，可以用CSS的:has()选择器实现效果，无需改动后端代码：
首先给顶部的hr加一个标识类：

<hr class="action-top-hr">
<div class="actions">
    <!-- 原有代码不变 -->
</div>
<hr>

然后添加对应的CSS规则：

/* 当.btn-toolbar为空时，隐藏顶部的hr */
.actions:has(.btn-toolbar:empty) ~ .action-top-hr {
    display: none;
}

注意该方案的兼容性要求：Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容低版本浏览器不建议使用。

内容的提问来源于stack exchange，提问作者Natsuo