css - PreCSS 嵌套不起作用

标签 css postcss

我有以下使用 PostCSS precss 插件的 CSS 声明:

.woocommerce-account.logged-in {

    .myaccount-hamburger{
        display: block;
    }

    .woocommerce{
        position: static;
    }

    #main{
        position: relative;
    }

    .site-header{
        margin-bottom: 0;
    }

}

但无论出于何种原因,.woocommerce 规则未被应用。任何线索为什么?我知道它是一个有效的选择器,因为如果我开始摆弄并删除一些其他声明,它实际上会起作用。

请注意,如果我像这样手动扩展每条规则,一切都会正常进行。因此,这是嵌套的问题:

.woocommerce-account.logged-in .myaccount-hamburger{
    display: block;
}

.woocommerce-account.logged-in .woocommerce{
    position: static;
} 

.woocommerce-account.logged-in #main{
    position: relative;
}

.woocommerce-account.logged-in .site-header{
    margin-bottom: 0;
}

根据要求,这里有一些 HTML。有很多 html,所以我将展示基础知识...

<body class="woocommerce-account logged-in">
    <header class="site-header"></header>
    <main id="main">
        <div class="myaccount-hamburger"></div>
        <div class="woocommerce"></div>
    </main>
</body>

最佳答案

您可能会提供更多关于此的上下文以获得答案,但您可能将 position: static; 误认为是 position: fixed;

Static 是 position 的默认值,因此除非您以其他方式设置它(即在上述以外的某些代码中),否则它将保持不变。

关于css - PreCSS 嵌套不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37949593/

相关文章:

css - 如何使用 PostCSS 在 Vue 中导入全局 css?

css - 同步使用自动前缀

html - CSS:自动更新字体大小

css - 背景图像回退 : should I use CSV or multiple rules?

css - 从 Javascript 更新 CSS 模块变量

javascript - 未生成来自 tailwind.config.js 的自定义顺风颜色

jQuery - 可以将背景图像调整为设定大小吗?

javascript - 使用 Jquery 更改元素的边距

javascript - 从第三方服务器更改图像

javascript - 我的 PostCSS 插件在 Vue-cli 3 项目中不起作用