Question

我使用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>

Answer 1

您可能会在此处提供更多上下文以获得答案，但您可能会误以为position: static; position: fixed;。

静态是位置的默认值，所以除非你另外设置它（即在上面以外的某些代码中），它将保持不变。

Answer 2

你需要在“.woocommerce-account”和“.logged-in”之间加一个空格

像这样：

.woocommerce-account .logged-in {

}

如果您的div是这样的：

<div class = "woocomerce-account">
    <div class = "logged-in">
    </div>
</div>

希望有帮助=）

编辑：更新您的问题

我想我发现了你的问题，

<body class=".woocommerce-account .logged-in">

在这样的词之前必须没有分数：

<body class="woocommerce-account logged-in">

希望现在有所帮助！

如果没有帮助，问题可能出在这段代码之外的另一个地方。

PreCSS嵌套不起作用

2 个答案: