如何为不含<li>元素的<ul>容器设置样式？

一、修复:has()选择器的使用问题 #

你写的选择器逻辑是正确的，样式未生效大概率是浏览器兼容性问题——:has()是CSS Selectors Level 4的新特性，仅支持Chrome 105+、Firefox 121+、Safari 15.4+等较新版本的浏览器。如果目标浏览器版本较低，这个选择器会直接失效。

如果确认浏览器支持，可直接使用以下写法（若存在其他高优先级样式干扰，可提升选择器权重）：

ul.con:not(:has(> li)) {
    background-color: #cccccc;
    border: 3px solid #000000;
}

提升权重的示例：

body ul.con:not(:has(> li)) {
    background-color: #cccccc;
    border: 3px solid #000000 !important;
}

二、兼容旧浏览器的替代方案 #

如果需要支持不兼容:has()的旧浏览器，可通过以下两种方式解决：

方案1：反向设置样式（利用:has()正向匹配） #

先给<ul.con>设置“空状态”的默认样式，再用:has(> li)覆盖有子元素时的样式：

/* 空状态样式 */
ul.con {
    background-color: #cccccc;
    border: 3px solid #000000;
}
/* 有li元素时的样式，覆盖空状态 */
ul.con:has(> li) {
    background-color: #fff; /* 替换为你的默认背景色 */
    border: 1px solid #ddd; /* 替换为你的默认边框样式 */
}

方案2：JavaScript辅助添加状态类 #

通过监听<ul>的子元素变化，动态添加/移除状态类，完全兼容所有浏览器：

const conList = document.querySelector('ul.con');

// 初始化状态
updateEmptyState();

// 监听子元素变化
const observer = new MutationObserver(updateEmptyState);
observer.observe(conList, { childList: true });

function updateEmptyState() {
    const hasLi = conList.querySelectorAll('li').length > 0;
    conList.classList.toggle('empty', !hasLi);
}

然后在CSS中针对.empty类写样式：

ul.con.empty {
    background-color: #cccccc;
    border: 3px solid #000000;
}

三、关于:empty选择器的补充 #

:empty选择器仅匹配**完全没有任何内容（包括空白字符、换行）**的元素，所以你的场景里无法直接使用。如果能通过代码控制<ul>的内容（确保空状态下没有空白），也可以直接用:empty：

ul.con:empty {
    background-color: #cccccc;
    border: 3px solid #000000;
}

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