PreCSS 嵌套不起作用答案

【问题标题】：PreCSS nesting not workingPreCSS 嵌套不起作用
【发布时间】：2016-06-22 20:10:30
【问题描述】：

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

【问题讨论】：

请同时发布您的 html，因为 @MattheusBica 的答案可能是正确的，但无法确定。（也没有任何方法可以在没有 HTML 的情况下实际找到问题）。如果可能，还发布您的输出。
输出是所有样式规则都在应用，除了 .woocommerce 没有更改为静态。
去掉标记中类名中的点......
@Red2678 哦，这些实际上并不存在。我错误地在这个问题中添加了它们。
这组规则的 PostCSS 输出是什么样的？

标签： css postcss

【解决方案1】：

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

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

【讨论】：

这就是答案！
这不是答案。位置静态是故意的。这个问题与嵌套有关。如果我像我在问题中所做的那样扩展 CSS，它的工作方式与我想要的完全一样，但是由于某种原因，当我嵌套它时，静态规则不会被应用。在这一点上忘记实际的规则本身。事实是，当我嵌套时，甚至根本没有应用某些样式，但是当我展开它时它会应用。

【解决方案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">

希望现在有帮助！

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

【讨论】：

不，我说的是 .woocommerce-account 也有 .logged-in 作为一个类。

那么，你做对了，这个标签没有问题，问题可能出在另一个标签上，发布你的整个 div 结构（只是重要的），检查我的新编辑。
我用 html 更新了我的答案。另请注意有关扩展 CSS 工作的部分。出于某种原因，只有嵌套版本失败了。
对不起，这只是我写问题时的一个错误。它实际上并没有 html 中的点。