如何仅通过CSS实现带info类元素按指定规则控制显示隐藏

实现方案 #

可以实现，不需要依赖has选择器，利用CSS的nth-child类过滤语法即可覆盖所有需求场景，兼容Chrome 90+、Firefox 113+、Safari 14+，覆盖绝大多数主流用户群体。

完整代码 #

/* 基础规则：所有info元素默认可见 */
.info {
    display: block;
}
/* 默认隐藏同时携带extra类的info元素 */
.info.extra {
    display: none;
}
/* 当extra类的info是同级唯一的info元素时，恢复显示 */
.info.extra:nth-child(1 of .info):nth-last-child(1 of .info) {
    display: block;
}

效果验证 #

• 情况1：仅1个纯info类div：命中第一条规则，正常显示
• 情况2：2个纯info类div：均命中第一条规则，全部显示
• 情况3：同时存在extra类info和纯info：extra类命中第二条规则隐藏，仅纯info显示，和两个元素的前后顺序无关
• 情况4：仅1个extra类info：命中第三条规则，正常显示

低版本浏览器降级方案 #

如果需要兼容不支持nth-child(of)语法的旧版本浏览器，且业务场景中所有info元素的同级不存在其他非info类的子元素，可以用only-child伪类替代，兼容所有现代浏览器：

.info {
    display: block;
}
.info.extra {
    display: none;
}
.info.extra:only-child {
    display: block;
}

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