HTML与LESS样式不生效求助：修改样式文件无效果

核心问题1：缺少LESS编译脚本 #

浏览器本身无法直接解析.less文件，必须引入LESS.js实现浏览器端实时编译。在你的HTML<head>标签末尾添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/less@4.1.3"></script>

核心问题2：LESS嵌套选择器错误 #

你的DOM结构里，.top_sub-content是和.top平级的独立元素，但在LESS代码里你把它嵌套在了.top选择器内部，导致样式完全匹配不到目标节点。修正后的LESS代码如下：

body {
    width: 100%;
    height: 100%;
}
.top {
    display: flex;

    .top_content {
        flex: 1;
    }
}
// 将.top_sub-content移到.top外层，与它同级
.top_sub-content {
    background: #33A3EF;
    flex-basis: 40%;

    img {
        max-width: 100%;
    }
}

次要优化：路径统一 #

你的style.less引用路径是href="style.less"，建议和其他样式文件保持一致改成./style.less，避免潜在的路径解析问题：

<link rel="stylesheet/less" type="text/css" href="./style.less"/>

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