CSS如何响应数据空状态显示—:empty伪类应用

<div class="data-container">
    <!-- 数据加载后会在这里插入内容 -->
</div>

<div class="another-container">
    <p>这里有内容</p>
</div>

.data-container:empty {
    display: none; /* 当.data-container为空时，将其隐藏 */
}

/* 另一个例子，如果你想给空的元素一个边框提示 */
.my-box:empty {
    border: 1px dashed #ccc;
    min-height: 50px; /* 确保空的时候也有个视觉占位 */
    background-color: #f9f9f9;
}

<div class="list-wrapper">
    <ul class="data-list">
        <!-- 列表项会在这里动态加载 -->
    </ul>
    <div class="empty-state-message">
        <p>暂无数据，请稍后再试或添加新内容。</p>
        <button>立即添加</button>
    </div>
</div>

/* 默认隐藏空状态提示 */
.empty-state-message {
    display: none;
    text-align: center;
    padding: 20px;
    color: #666;
    border: 1px solid #eee;
    background-color: #fefefe;
    margin-top: 20px;
}

/* 当.data-list为空时，隐藏列表并显示空状态提示 */
.data-list:empty {
    display: none; /* 隐藏空的列表 */
}

/* 利用兄弟选择器，当.data-list为空时，显示其兄弟元素.empty-state-message */
.data-list:empty + .empty-state-message {
    display: block; /* 显示空状态提示 */
}

<div class="dashboard-card">
    <h3 class="card-title">我的待办事项</h3>
    <ul class="todo-list">
        <!-- 待办事项列表 -->
    </ul>
    <div class="empty-todo-state">
        <img src="no-data-illustration.svg" alt="暂无待办事项" class="empty-illustration">
        <p>恭喜！您的待办事项已全部完成，或者您还没有添加任何事项。</p>
        <button class="add-todo-btn">添加新待办</button>
    </div>
</div>

.empty-todo-state {
    display: none; /* 默认隐藏 */
    text-align: center;
    padding: 30px 20px;
    background-color: #f8f8f8;
    border-radius: 8px;
    margin-top: 15px;
}

.empty-todo-state .empty-illustration {
    max-width: 150px;
    margin-bottom: 20px;
}

.empty-todo-state p {
    color: #777;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
}

.empty-todo-state .add-todo-btn {
    background-color: #007bff;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.empty-todo-state .add-todo-btn:hover {
    background-color: #0056b3;
}

/* 核心逻辑：当todo-list为空时，隐藏它并显示empty-todo-state */
.todo-list:empty {
    display: none;
}

.todo-list:empty + .empty-todo-state {
    display: block; /* 显示空状态提示 */
}

<!-- 即使看起来是空的，但这里有个换行符，所以它不被认为是:empty -->
<div class="my-content">
</div> 

<!-- 同理，这里有个注释，也不是:empty -->
<div class="my-content">
    <!-- 我是个注释 -->
</div>

function updateEmptyState(containerSelector, emptyMessageSelector) {
    const container = document.querySelector(containerSelector);
    const emptyMessage = document.querySelector(emptyMessageSelector);

    if (!container || !emptyMessage) return;

    // 判断逻辑可以更复杂，例如：
    // container.children.length === 0
    // container.textContent.trim() === ''
    // 甚至可以检查特定子元素是否存在
    const isEmpty = container.children.length === 0; // 假设我们只关心子元素

    if (isEmpty) {
        container.classList.add('is-empty');
        emptyMessage.style.display = 'block'; // 或者通过CSS类控制
    } else {
        container.classList.remove('is-empty');
        emptyMessage.style.display = 'none';
    }
}

// 假设有一个列表容器和对应的空状态消息
// 在数据加载或更新后调用
// updateEmptyState('.my-list', '.my-empty-message');

/* CSS根据.is-empty类来显示或隐藏内容 */
.my-list.is-empty {
    /* 隐藏列表本身或改变其样式 */
    display: none;
}

.my-empty-message {
    display: none; /* 默认隐藏 */
}

/* 当.my-list被标记为.is-empty时，显示空消息 */
.my-list.is-empty + .my-empty-message {
    display: block;
}

/* 当ul中没有li元素时，显示空状态消息 */
.data-list:not(:has(li)) + .empty-state-message {
    display: block;
}
/* 隐藏空的列表 */
.data-list:not(:has(li)) {
    display: none;
}

<!-- 伪代码：服务器端模板逻辑 -->
<% if (data.items && data.items.length > 0) { %>
    <ul class="data-list">
        <% data.items.forEach(item => { %>
            <li><%= item.name %></li>
        <% }); %>
    </ul>
<% } else { %>
    <div class="empty-state-message">
        <p>暂无数据。</p>
    </div>
<% } %>