我有以下使用 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/