如何解读该CSS语法？主题中特殊CSS代码解析求助

这根本不是什么新语法，就是被压缩过的CSS代码——为了减小文件体积、加快页面加载速度，前端工具会自动去掉所有不必要的空格、换行，把多个样式规则挤到一行里，才会出现你看到的怪异格式。

你困惑的}.wy-tray-container li部分，其实是第一个样式规则的结束符}，紧接着第二个选择器.wy-tray-container li，只是因为没换行才显得突兀。

把这段压缩代码还原成标准可读格式后是这样的：

@media screen and (max-width: 768px) {
    .wy-tray-container {
        bottom: auto;
        top: 0;
        width: 100%;
    }
    .wy-tray-container li {
        width: 100%;
    }
}

这段代码的具体含义：

• 这是一个媒体查询，当屏幕宽度≤768px时，触发里面的样式：
  • 给类名为.wy-tray-container的元素调整定位：取消底部固定（bottom: auto），改为顶部固定（top: 0），同时设置宽度为100%（占满父容器）
  • 给.wy-tray-container下的所有<li>子元素设置宽度100%，让每个列表项都铺满容器宽度

这类压缩CSS是前端开发里的常规操作，常用工具比如CSSNano、CleanCSS都会做这种处理。如果要修改这类代码，建议先把压缩代码用格式化工具还原成标准格式再编辑，会方便很多。

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