0

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

2 回答 2

1

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

静态是位置的默认值，因此除非您以其他方式设置它（即在除上述代码之外的某些代码中），否则它将保持不变。

于 2016-06-21T16:36:04.830 回答
-1

您需要在“.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">

希望现在有帮助！

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

于 2016-06-21T16:22:39.470 回答